文件预览（.docx，.xlsx，.pdf）

文件预览（.docx，.xlsx，.pdf）

一、文件预览问题

1. 判断文件格式

const match = record.fileName.match(/\.([^.]+)$/)[1]
if(match == 'docx'){
......
}else if(match == 'pdf'){
......
}else if(match == 'xlsx'){
......
} else {message.warning('文件格式不支持预览')
}

2. 判断不同类型文件使用不同插件或方法
   docx文件引入插件

import { renderAsync } from 'docx-preview'

xlsx文件引入插件

import * as XLSX from 'xlsx'

pdf文件引入插件

使用'./iframe'插件，不需要下载

二、docx文件下载

<div ref="files" style="overflow: auto;height: 900px"></div>

	const match = record.fileName.match(/\.([^.]+)$/)[1]if(match == 'docx'){const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})const time = setInterval( () => {renderAsync(blob, files.value, null, {className: 'docx', // string：默认和文档样式类的类名/前缀inWrapper: true, // boolean：启用围绕文档内容的包装器渲染ignoreWidth: false, // boolean：禁用页面的渲染宽度ignoreHeight: false, // boolean：禁止渲染页面高度ignoreFonts: false, // boolean：禁用字体渲染breakPages: true, // boolean：在分页符上启用分页ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页experimental: false, // boolean：启用实验功能（制表符停止计算）trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xmlTemplate 文档中移除 xmlTemplate 声明useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURLuseMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）debug: false // boolean：启用额外的日志记录})if (files.value) {fileCheckLoading.value = falseclearInterval(time)}}, 1000)}

三、pdf文件下载

<iframeid="pdfIframe"v-if="pdfUrl":src="pdfUrl"type="application/x-google-chrome-pdf"style="width: 100%; height: 800px; overflow-y: auto; overflow-x: auto"></iframe>

四、pdf文件下载

<div ref="files" style="overflow: auto;height: 900px" v-else></div>

if(match == 'pdf'){let blob = new Blob([res.data], { type: 'application/pdf' })pdfUrl.value = URL.createObjectURL(blob)fileCheckLoading.value = false}

if(match == 'xlsx'){const reader = new FileReader()reader.readAsBinaryString(res.data)reader.onload = (ev) => {try {const data = ev.target.resultconst wb = XLSX.read(data, {type: 'binary',cellText: false,cellDates: true})const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])let tableheader = outdata[0]columns.value = []for (let val in tableheader) {columns.value.push({title: val,dataIndex: val,key: val})}outdata.forEach((v, i) => {v = { ...v, key: i }})tableData.value = outdata} catch (e) {return false}}fileCheckLoading.value = false}

五、总结
样式查看

	<a-modal v-model:open="previewFileShow" title="查看文件详情" :width="1200" @ok='previewFileShow = false'><a-spin :spinning="fileCheckLoading"><iframeid="pdfIframe"v-if="pdfUrl":src="pdfUrl"type="application/x-google-chrome-pdf"style="width: 100%; height: 800px; overflow-y: auto; overflow-x: auto"></iframe><div v-else-if="tableData.length > 0"><a-table :columns="columns" :data-source="tableData" bordered> </a-table></div><div ref="files" style="overflow: auto;height: 900px" v-else></div></a-spin></a-modal>

const match = record.fileName.match(/\.([^.]+)$/)[1]if(match == 'docx'){const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})const time = setInterval( () => {renderAsync(blob, files.value, null, {className: 'docx', // string：默认和文档样式类的类名/前缀inWrapper: true, // boolean：启用围绕文档内容的包装器渲染ignoreWidth: false, // boolean：禁用页面的渲染宽度ignoreHeight: false, // boolean：禁止渲染页面高度ignoreFonts: false, // boolean：禁用字体渲染breakPages: true, // boolean：在分页符上启用分页ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页experimental: false, // boolean：启用实验功能（制表符停止计算）trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xmlTemplate 文档中移除 xmlTemplate 声明useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURLuseMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）debug: false // boolean：启用额外的日志记录})if (files.value) {fileCheckLoading.value = falseclearInterval(time)}}, 1000)}else if(match == 'pdf'){let blob = new Blob([res.data], { type: 'application/pdf' })pdfUrl.value = URL.createObjectURL(blob)fileCheckLoading.value = false}else if(match == 'xlsx'){const reader = new FileReader()reader.readAsBinaryString(res.data)reader.onload = (ev) => {try {const data = ev.target.resultconst wb = XLSX.read(data, {type: 'binary',cellText: false,cellDates: true})const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])let tableheader = outdata[0]columns.value = []for (let val in tableheader) {columns.value.push({title: val,dataIndex: val,key: val})}outdata.forEach((v, i) => {v = { ...v, key: i }})tableData.value = outdata} catch (e) {return false}}fileCheckLoading.value = false} else {message.warning('文件格式不支持预览')}}).catch((e)=>{console.log(e)}).finally(()=>{previewFileShow.value = true// fileCheckLoading.value = false})