学习记录20vue使用blob流预览word ，Excel，pdf，TXT，图片，视频

TXT，PDF直接使用浏览器本身预览

excel使用插件 xlsx，这个插件需要用到arraybuffer的流格式，我是使用前端转换的详见js代码，也可以叫后台返回arraybuffer的数据流

word 使用插件  docx-preview

话不多说直接上菜，css样式自己调就行

一、安装插件

1. npm install xlsx --save

2. npm install docx-preview --save

二、HTML部分

1.  
   <el-dialog
2.  
   title="文件预览"
3.  
   :visible.sync="dialogVisible"
4.  
   fullscreen
5.  
   append-to-body
6.  
   :before-close="handleClose"
7.  
   class="file-dialog">
8.  
   <div style="width: 100%;height: 100%;">
9.  
   <img v-if="imgUrl" :src="imgUrl" alt="" style="width: 100%;height: 100%">
10.  
    <!-- pdf和txt使用iframe -->
11.  
    <iframe v-if="pdfUrl" :src="pdfUrl" frameborder="0" style="width: 100%;height: 100%;min-height: 500px;"></iframe>
12.  
    <video v-if="videoUrl" :src="videoUrl" controls style="width: 100%;height: 100%;max-height: 800px;"></video>
13.  
    <div v-if="docFile">
14.  
    <div ref="file"></div>
15.  
    </div>
16.  
    <div v-if="xlsFile" class="excel-view-container">
17.  
    <!-- Excel使用tab选项卡来模拟表格里的sheet业 -->
18.  
    <el-tabs type="border-card" v-if="sheetNames && sheetNames.length" @tab-click="handleClick">
19.  
    <el-tab-pane :label="item" v-for="(item, index) in sheetNames" :key="index">
20.  
    <div class="excelView" v-html="excelView"></div>
21.  
    </el-tab-pane>
22.  
    </el-tabs>
23.  
    </div>
24.  
    </div>
25.  
    </el-dialog>

三、js部分

1.  
   <script>
2.  
   // 定义blob对应的type
3.  
   const fileTypeMap = {
4.  
   "xls": "application/vnd.ms-excel",
5.  
   "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
6.  
   "doc": "application/msword",
7.  
   "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
8.  
   "pdf": "application/pdf",
9.  
   "ppt": "application/pdf",
10.  
    "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
11.  
    "png": "image/png",
12.  
    "gif": "image/gif",
13.  
    "jpeg": "image/jpeg",
14.  
    "jpg": "image/jpeg",
15.  
    "txt": "text/plain",
16.  
    }
17.  
    export default {
18.  
    data() {
19.  
    return {
20.  
    imgUrl: '', //图片路径
21.  
    pdfUrl: '', //pdf路径
22.  
    videoUrl: '', //视频路径
23.  
    excelView: '', //表格转换后的html数据
24.  
    docFile: false, //是否是word文件
25.  
    xlsFile: false, //是否是Excel文件
26.  
    execlArraybufferData: null, //Excelblob转换为arraybuff数据
27.  
    sheetNames: null, //从数据中获取到的sheet页数组
28.  
    imgType: ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'],
29.  
    videoType: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob'],
30.  
    wordType: ['text', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'rar', 'zip', '7z', 'apz', 'ar', 'bz', 'car', 'dar', 'cpgz', 'f', 'ha', 'hbc', 'hbc2', 'hbe','hpk','hyp'],
31.  
    }
32.  
    },
33.  
    methods: {
34.  
    // 获取文件后缀
35.  
    getFileType(name) {
36.  
    if (name) {
37.  
    if (name.lastIndexOf(".") > -1) {
38.  
    return name.slice(name.lastIndexOf(".") 1);
39.  
    } else {
40.  
    return false
41.  
    }
42.  
    }
43.  
    },
44.  
    // 预览文件
45.  
    filePreviewPDF(path, name) {
46.  
    let fileType = this.getFileType(path)， url, data
47.  
    // 后台接口方法url：接口地址，data给后台传的参数
48.  
    this.fileView(url, data).then(res => {
49.  
    let type = ''
50.  
    if (fileType) {
51.  
    type = fileTypeMap[fileType]
52.  
    if (this.imgType.includes(fileType)) {
53.  
    // 图片类型的
54.  
    const blob = new Blob([res], { type })
55.  
    this.imgUrl = window.URL.createObjectURL(blob)
56.  
    } else if (this.videoType.includes(fileType)) {
57.  
    // 视频类型的
58.  
    const blob = new Blob([res])
59.  
    this.videoUrl = window.URL.createObjectURL(blob)
60.  
    } else if (fileType === 'pdf' || fileType === 'txt') {
61.  
    // pdf和文本类型的，用iframe打开
62.  
    const blob = new Blob([res], { type })
63.  
    this.pdfUrl = window.URL.createObjectURL(blob)
64.  
    } else if (fileType === 'doc' || fileType === 'docx') {
65.  
    // word类型的用docx-preview插件
66.  
    this.docFile = true
67.  
    let docx = require("docx-preview")
68.  
    this.$nextTick(() => {
69.  
    docx.renderAsync(res, this.$refs.file).then(x => console.log("docx: finished",x))
70.  
    })
71.  
    } else if (fileType === 'xls' || fileType === 'xlsx') {
72.  
    // 表格类型的用xlsx插件
73.  
    this.xlsFile = true
74.  
    let XLSX = require("xlsx")
75.  
    this.XLSX = XLSX
76.  
    this.execlType = type
77.  
    let blob = new Blob([res], {type: this.execlType})
78.  
    let reader = new FileReader()
79.  
    reader.readAsArrayBuffer(blob) // blob类型转换为ArrayBuffer类型
80.  
    this.tabChange(0, reader)
81.  
    } else {
82.  
    this.handleClose()
83.  
    this.$modal.msgError('不支持此文件预览')
84.  
    }
85.  
    } else {
86.  
    this.handleClose()
87.  
    this.$modal.msgError('不支持此文件预览')
88.  
    }
89.  
    })
90.  
    },
91.  
    handleClick(data) {
92.  
    this.tabChange(data.index)
93.  
    },
94.  
    tabChange(index, reader) {
95.  
    this.excelView = ''
96.  
    let XLSX = this.XLSX
97.  
    let _this = this
98.  
     
99.  
    // 如果第一次进来
100.  
     if (!this.sheetNames) {
101.  
     // 文件转换加载完成后
102.  
     reader.onload = function() {
103.  
     let arraybufferData = this.result
104.  
     this.execlArraybufferData = arraybufferData
105.  
     let data = new Uint8Array(arraybufferData) // es2017的方法
106.  
     let workbook = XLSX.read(data, { type: "array" }) // 得到表格的array数据
107.  
     _this.workbooks = workbook // 赋值到此组件最外面，一会要用
108.  
     let sheetNames = workbook.SheetNames; // 得到execl工作表名称集合，结果类似这样['sheet1','sheet2']
109.  
     _this.sheetNames = sheetNames // 赋值到此组件最外面，一会要用
110.  
     let worksheet = workbook.Sheets[sheetNames[index]] // 获取第几个工作表0就是'sheet1'，以此类推
111.  
     _this['excelView'] = XLSX.utils.sheet_to_html(worksheet) // 把表格的array数据转换成html数据
112.  
     _this.$nextTick(function () {
113.  
     // DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。
114.  
     _this.setStyle4ExcelHtml();
115.  
     })
116.  
     }
117.  
     } else {
118.  
     // 已经有数据了的时候直接获取对应sheet里的内容
119.  
     let worksheet = this.workbooks.Sheets[this.sheetNames[index]];
120.  
     this['excelView'] = XLSX.utils.sheet_to_html(worksheet)
121.  
     }
122.  
      
123.  
      
124.  
     },
125.  
     // 设置Excel转成HTML后的样式
126.  
     setStyle4ExcelHtml() {
127.  
     const excelViewDOM = document.getElementById("excelView");
128.  
     if (excelViewDOM) {
129.  
     const excelViewTDNodes = excelViewDOM.getElementsByTagName("td"); // 获取的是HTMLConnection
130.  
     if (excelViewTDNodes) {
131.  
     const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes);
132.  
     for (const i in excelViewTDArr) {
133.  
     const id = excelViewTDArr[i].id; // 默认生成的id格式为sjs-A1、sjs-A2......
134.  
     if (id) {
135.  
     const idNum = id.replace(/[^0-9]/gi, ""); // 提取id中的数字，即行号
136.  
     if (idNum && (idNum === "1" || idNum === 1)) {
137.  
     // 第一行标题行
138.  
     excelViewTDArr[i].classList.add("class4Title");
139.  
     }
140.  
     if (idNum && (idNum === "2" || idNum === 2)) {
141.  
     // 第二行表头行
142.  
     excelViewTDArr[i].classList.add("class4TableTh");
143.  
     }
144.  
     }
145.  
     }
146.  
     }
147.  
     }
148.  
     },
149.  
     handleClose() {
150.  
     this.$emit('closeDialog', false)
151.  
     }
152.  
     }
153.  
     }
154.  
     </script>

思路来源于以下链接；

这篇好文章是转载于：学新通技术网