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

文章目录

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

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

一、文件预览问题

判断文件格式

javascript 复制代码

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

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

javascript 复制代码

import { renderAsync } from 'docx-preview'

xlsx文件引入插件

javascript 复制代码

import * as XLSX from 'xlsx'

pdf文件引入插件

javascript 复制代码

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

二、docx文件下载

javascript 复制代码

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

javascript 复制代码

	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.createObjectURL
						 useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
						 showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
						 debug: false // boolean：启用额外的日志记录
					 })
					if (files.value) {
						fileCheckLoading.value = false
						clearInterval(time)
					}
				}, 1000)
			}

三、pdf文件下载

javascript 复制代码

<iframe
				id="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文件下载

javascript 复制代码

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

javascript 复制代码

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

javascript 复制代码

if(match == 'xlsx'){
				const reader = new FileReader()
				reader.readAsBinaryString(res.data)
				reader.onload = (ev) => {
					try {
						const data = ev.target.result
						const 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
			}

五、总结

样式查看

javascript 复制代码

	<a-modal v-model:open="previewFileShow" title="查看文件详情" :width="1200" @ok='previewFileShow = false'>
		<a-spin :spinning="fileCheckLoading">
			<iframe
				id="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>

javascript 复制代码

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.createObjectURL
						 useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
						 showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
						 debug: false // boolean：启用额外的日志记录
					 })
					if (files.value) {
						fileCheckLoading.value = false
						clearInterval(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.result
						const 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
		})