文件预览(.docx,.xlsx,.pdf)

文章目录

文件预览(.docx,.xlsx,.pdf)

一、文件预览问题

  1. 判断文件格式
javascript 复制代码
const match = record.fileName.match(/\.([^.]+)$/)[1]
if(match == 'docx'){
......
}else if(match == 'pdf'){
......
}else if(match == 'xlsx'){
......
} else {
	message.warning('文件格式不支持预览')
}
  1. 判断不同类型文件使用不同插件或方法
    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
		})
相关推荐
拓端研究室6 小时前
专题:2025人形机器人、工业机器人、智能焊接机器人、扫地机器人产业洞察报告 | 附158+份报告PDF、数据仪表盘汇总下载
microsoft·机器人·pdf
TextIn智能文档云平台7 小时前
复杂PDF文档结构化提取全攻略——从OCR到大模型知识库构建
pdf·ocr
会飞的小菠菜7 小时前
PDF文件中的广告二维码图片该怎么批量删除
pdf·删除·二维码·批量
一只花里胡哨的程序猿1 天前
odoo打印pdf速度慢问题
pdf·odoo
灵海之森1 天前
Python将md转html,转pdf
pdf
阿幸软件杂货间1 天前
最新PDF版本!Acrobat Pro DC 2025,解压即用版
pdf·adobe acrobat·acrobat
星空的资源小屋1 天前
网易UU远程,免费电脑远程控制软件
人工智能·python·pdf·电脑
会飞的小菠菜1 天前
如何一次性将多个PPT幻灯片批量转换成PDF文档
pdf·powerpoint·ppt·批量·格式转换
somethingGoWay2 天前
wpf .netcore 导出pdf文件
pdf·wpf·.netcore
小白电脑技术2 天前
PDF教程|如何把想要的网页保存下来?
pdf·电脑