文件预览(.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
		})
相关推荐
winfredzhang11 小时前
Python小说图片PDF生成器开发详解
python·pdf·图文并茂·电子小说
^O^ ^O^19 小时前
pc端pdf预览
前端·javascript·pdf
2501_929157682 天前
FC和SFC的原版说明书(扫描的PDF)
pdf
zhangfeng11332 天前
R 导出 PDF 时中文不显示 不依赖 showtext** 的最简方案(用 extrafont 把系统 TTF 真正灌进 PDF 内核)
开发语言·r语言·pdf·生物信息
pc大老3 天前
PDF文件翻译新方法:轻松多语言转换!
pdf·pdf文件·#pdf设置·pdf转换多国语言
SEO-狼术4 天前
Use Sticky Notes for Easier PDF Collaboration
pdf
私人珍藏库6 天前
[Windows] PDF 专业电子签章工具 v3.3
windows·pdf
广都--编程每日问6 天前
deepseek 的对话json导出成word和pdf
pdf·json·word·deepseek·exprot
livingbody7 天前
【2025年9月版 亲测可用】《人民日报》PDF文件下载
开发语言·爬虫·python·pdf
私人珍藏库7 天前
[Windows] 发票识别工具。支持xml、pdf、ofd文件
xml·pdf