vue中实现PDF文件流预览

明思齐2023-12-16 7:00

代码示例

html 复制代码 
<template>
	<div class="print">
		<div v-if="!viewShow" class="opt-box">
			<div style="height: 700px; overflow: auto;">
				<el-table :data="tableData" border>
					<el-table-column prop="no" label="序号" align="center">
					</el-table-column>
					<el-table-column prop="proveTypeName" label="文件名称" align="center">
					</el-table-column>
					<el-table-column prop="applyTime" label="申请时间" align="center">
					</el-table-column>
					<el-table-column label="操作" width="260" align="center">
						<template slot-scope="scope">
							<el-button type="text" icon="el-icon-view" @click="onChangeView(scope.row)"> 查看 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<input ref="input" style="width: 100px" v-show="false" type="file" />
		<div class="print-btn" v-if="viewShow">
			<div class="txt-btn">今日已打印 {{dayCount}} 次 </div>
			<el-button circle type="primary" @click.stop="printAssignFile">打印文件</el-button>
			<el-button circle @click="clearBox">返回上级</el-button>
		</div>
		<div v-show='viewShow' id="viewBox">
		</div>
	</div>
</template>

<script>
	import { printFile, getPrintList } from "@/api/print";
	import { provePreview, queryPrintsSum } from "@/api/preview";

	const blobToJson = (data) => {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsText(new Blob([data], {
				type: 'application/json'
			}), 'utf-8');
			reader.onload = () => {
				try {
					const json = JSON.parse(reader.result);
					resolve(json);
				} catch (e) {
					reject(e);
				}
			};
		});
	}
	export default {
		data() {
			return {
				tableData: [],
				dayCount: '',
				viewShow: false,
				dataFile: {},
				proveId: '',
			};
		},
		mounted(){
            //获取列表数据
			this.init();
			//获取打印次数
			this.getPrintsSum()
		},
		methods: {
			//获取列表数据
			init() {
				getPrintList(this.page).then((res) => {
					if (res && res.code === 200) {
						this.tableData = res.data.recordList;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			//获取打印次数
			getPrintsSum(){
				queryPrintsSum().then((res)=>{
					if(res && res.code == 200){
						this.dayCount = res.data
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			// 清除pdf
			clearBox() {
				this.viewShow = false
				var e = document.querySelector("#viewBox");
				var child = e.lastElementChild;
				while (child) {
					e.removeChild(child);
					child = e.lastElementChild;
				}
			},
            // 展示PDF文件的预览
			showPdfPreview(data) {
				let _self = this
				const deal = () => {
					try {
						_self.clearBox()
						const viewBox = document.getElementById('viewBox');
						const pdf = document.createElement('iframe')
						pdf.id = 'iframe'
						pdf.setAttribute('frameborder', 0)
						const blob = new Blob([data], {
							type: 'application/pdf'
						});
						const pdfUrl = URL.createObjectURL(blob);
						pdf.src = pdfUrl + '#toolbar=0';
						pdf.style.width = '100%'
						pdf.style.height = '100%'
						viewBox.appendChild(pdf)
						_self.viewShow = true
					} catch (e) {
						_self.$message.error("未能正确加载文件");
						_self.clearBox()
					}
				}
				//1. 先将数据转换成json，看下是否是异常
				try {
					blobToJson(data).then((json) => {
						_self.$message.error(json.msg || "未能正确加载文件");
						_self.clearBox()
					}).catch((e) => {
						deal()
					})
				} catch (e) {
					_self.$message.error("未能正确加载文件");
					_self.clearBox()
				}
			},
			//预览
			onChangeView(row) {
				this.dataFile = row
				provePreview({
					proveId: row.proveId
				}).then((res) => {
					this.showPdfPreview(res)
					//获取打印次数
					this.getPrintsSum()
					if (res.code == 500) {
						this.$message.error("文件加载异常" || res.msg);
					}
				}).catch(err => {
					this.clearBox()
					this.$message.error("未能正确加载文件");
				});
			},
			//文件打印
			printAssignFile() {
				printFile(this.dataFile).then((res) => {
					if (res.code === 200) {
						//获取打印次数
						this.getPrintsSum()
						this.$message.success(res.msg);
					} else {
						this.$message.warning(res.msg);
					}
				});
			},
		},
	};
</script>
<style lang='less' scoped>
	.print {
		width: 100%;
		height: 100%;
		margin-top: 200px;
	}
	#viewBox {
		width: 70%;
		height: 720px;
		background-color: #ccc;
		margin: 0 auto;
	}
	.print-btn {
		position: fixed;
		top: 180px;
		right: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.txt-btn {
			margin-bottom: 30px;
			display: block;
			font-size: 22px;
			font-weight: 500;
			color: black;
			width: 180px;
			text-align: center;
		}
		.el-button {
			width: 160px;
			height: 160px;
			font-size: 22px;
		}
		.el-button+.el-button {
			margin-top: 30px;
			margin-left: 0 !important;
		}
	}
</style>

预览接口preview.js

javascript 复制代码 
/**
 * 证明预览
 * @param {*} data pdf文件流
 * @returns
 */
export function provePreview(data) {
	return request({
		url: "/layout/api/view",
		method: "post",
		data: data,
		responseType: 'blob',	//一定要设置响应类型，否则页面会是空白pdf
		contentType: "application/json;charset=UTF-8"
	});
}

实现步骤说明

这段代码我定义了一个 blobToJson 的函数，主要是将 Blob 类型的数据转化为 JSON 对象。

🏳‍🌈 实现步骤如下：

  1. 创建一个 Promise 对象，用于异步处理数据转换
  2. 再创建一个 FileReader 对象，用于读取 Blob 类型的数据
  3. 通过 FileReader 对象的 **readAsText()**方法，将 Blob 数据以文本形式读取出来，并指定编码格式为 UTF-8
  4. 在 FileReader 对象的 onload 方法中，通过 try...catch 将读取到的文本数据解析成 JSON 对象，并将解析后的结果作为 Promise 的 resolve 返回值。若是解析失败，则将错误信息作为 reject 返回值。
  5. 若是出现了异常，可使用 Promise 的 catch 方法进行捕获和处理。

clearBox() 方法

clearBox() 方法：在关闭文件预览时，清空预览区域的内容，以便下次预览文件时重新加载新的内容。

🏳‍🌈 实现步骤如下：

  1. 将 viewShow 设置为 false，即隐藏文件预览区域。
  2. 通过 document.querySelector("#viewBox") 获取到文件预览区域的 DOM 元素。
  3. 使用 while 循环，在文件预览区域内移除所有子元素，直到没有子元素为止。

showPdfPreview()方法

showPdfPreview()方法：用于展示PDF文件的预览，并对异常情况进行处理。

在展示预览之前，先将数据转换成json格式，如果转换过程中出现异常，则显示错误消息并清空文件预览区域；如果转换成功，则进行具体的展示逻辑。

🏳‍🌈 实现步骤如下：

  1. 创建一个deal函数，用于处理展示PDF预览的具体逻辑。
  2. 在deal函数中，首先调用clearBox方法清空文件预览区域的内容。
  3. 将传入的code赋值给组件的code属性，用于在展示预览时进行标识。
  4. 调用queryCount方法查询打印次数。
  5. 创建一个iframe元素，并设置id为'iframe'，设置frameborder为0。
  6. 使用Blob对象将传入的data转换为Blob类型，并设置type为**'application/pdf'**。
  7. 通过URL.createObjectURL方法生成PDF文件的URL。
  8. 将生成的PDF URL赋值给iframe的src属性，添加到文件预览区域，并设置宽度和高度为100%。
  9. 将iframe添加到文件预览区域中。
  10. 将组件的viewShow属性设置为true，显示文件预览区域。
  11. 使用try-catch-finally语句对异常进行处理。
  12. 在try块中，首先将data转换为json格式，判断是否存在异常。若有异常，显示错误消息并调用clearBox方法清空文件预览区域。
  13. 在catch块中，捕获到异常时，显示错误消息并调用clearBox方法清空文件预览区域。
  14. 在finally块中，关闭加载状态。

XX证明列表展示

XX证明文件预览效果图

相关推荐
IT女孩儿42 分钟前
JavaScript--WebAPI查缺补漏（二）
开发语言·前端·javascript·html·ecmascript
@解忧杂货铺5 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
苹果酱05676 小时前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
真的很上进10 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
web1309332039810 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport12 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_7482548812 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
噢，我明白了13 小时前
同源策略：为什么XMLHttpRequest不能跨域请求资源？
javascript·跨域
sanguine__13 小时前
APIs-day2
javascript·css·css3
苹果醋314 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）