预览 docx ,doc ,xls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
npm install xlsx docx-preview --save
 
<template>
  <div >
    <div v-if="previewData.type == 'doc'" ref="file"></div>
    <div v-if="previewData.type == 'xls'" v-html="tableau"></div>
  </div>
</template>
<script>
 
import axios from 'axios'
let docx = require('docx-preview');
const XLSX = require("xlsx")
 
export default {
  name: "index",
  props: {
    previewData: {
      default: {
        type: 'doc',
        url: ''
      }
    },
  },
  data() {
    return {
      tableau: '',
      pdfUrl: ''
    }
  },
  created() {
    if(this.previewData.url == '') {
      this.msgWarning('文件路径为空')
    } else {
      switch (this.previewData.type) {
        case 'doc':
          axios({
            method: 'get',
            responseType: 'blob', // 设置响应文件格式
            url: this.previewData.url,
          }).then(({data}) => {
            docx.renderAsync(data,this.$refs.file) // 渲染到页面预览
          })
              break
        case 'xls':
          axios.get(this.previewData.url,{
            responseType: "arraybuffer", // 设置响应体类型为arraybuffer
          }).then(({data})=> {
            let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
            let worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
            this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
          })
      }
    }
 
  },
  methods: {
 
  }
}
</script>
 
<style scoped>
 
</style>

  

posted @   想吃水煮麻辣鱼  阅读(575)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示