文件预览(.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
		})
相关推荐
CodeCraft Studio1 小时前
PDF处理控件Aspose.PDF教程:在C#中将PDF转换为Base64
服务器·pdf·c#·.net·aspose·aspose.pdf·pdf转base64
南风微微吹3 小时前
26考研英语一、二真题试卷及答案解析PDF电子版(1980-2025年)
考研·pdf
weixin_4024863420 小时前
直接将ppt导出成pdf 图片失真严重,选中整个图片和需要的对象后保存成图片,格式选择为.svg
pdf
TextIn智能文档云平台20 小时前
LLM 文档处理:如何让 AI 更好地理解中文 PDF 中的复杂格式?
人工智能·pdf
liliangcsdn20 小时前
使用Deepseek解析PDF文件
pdf
Red Car20 小时前
如何向文件夹内所有PDF增加水印
python·pdf
我命由我123451 天前
Photoshop - Photoshop 工具栏(14)抓手工具
ui·职场和发展·pdf·求职招聘·职场发展·photoshop·美工
我命由我123451 天前
PDFBox - PDFBox 加载 PDF 异常清单(数据为 null、数据为空、数据异常、文件为 null、文件不存在、文件异常)
java·服务器·后端·java-ee·pdf·intellij-idea·intellij idea
CHANG_THE_WORLD2 天前
PDFium导出pdf 图像
开发语言·c++·pdf
momo_al2 天前
Umi-OCR制作双层PDF
pdf·ocr