文件预览(.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
		})
相关推荐
熊出没4 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
最懒的菜鸟5 小时前
MinerU将PDF转成md文件,并分拣图片
人工智能·pdf
开开心心_Every17 小时前
便捷的电脑自动关机辅助工具
开发语言·人工智能·pdf·c#·电脑·音视频·sublime text
用什么都重名18 小时前
MinerU:高效智能PDF文档解析工具完全指南
人工智能·python·pdf·mineru·makedown
Xiaouuuuua18 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
CHANG_THE_WORLD1 天前
字体 Unicode 区块字符展示 PDF 生成器
pdf·libharu
Gq.xxu1 天前
RAG实战之dify源码文件解析-pdf文件解析流程
开发语言·python·pdf
Kyln.Wu1 天前
【python实用小脚本-131】Python 实现 HTML 到 PDF 转换:解决文档处理痛点的高效工具
python·pdf·html
KeThink2 天前
国民经济行业分类 GB/T 4754—2017 (PDF和exce版本)
pdf·excel
开开心心_Every2 天前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频