文件预览(.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
		})
相关推荐
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
东华果汁哥1 天前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html
诸葛大钢铁2 天前
Excel转PDF的三种方法
笔记·职场和发展·pdf·excel
爱分享的飘哥2 天前
第二十一 篇 PDF文档自动化:Python一键合并、分割、水印、提取与加密解密!你的PDF全能管家!
python·pdf·python操作pdf·pdf 加解密·pdf 分割和合并
簪花走马过长安3 天前
【PDF识别改名】使用京东云OCR完成PDF图片识别改名,根据PDF图片内容批量改名详细步骤和解决方案
ui·pdf·ocr·excel·京东云·wps·图片区域识别重命名
ComPDFKit3 天前
为什么有些PDF无法复制文字?原理分析与解决方案
人工智能·pdf·ocr
开开心心就好3 天前
电脑桌面整理工具,一键自动分类
运维·服务器·前端·智能手机·pdf·bash·symfony
咖啡色格调3 天前
Java使用itextpdf7生成pdf文档
java·pdf·maven
开开心心_Every3 天前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
余大侠在劈柴4 天前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf