快捷導(dǎo)航

在vue中實(shí)現(xiàn)PDF文件流預(yù)覽功能

更新時間：2023年12月17日 09:51:19 作者：明思齊

這篇文章主要為大家詳細(xì)介紹如何在vue中實(shí)現(xiàn)PDF文件流預(yù)覽功能,文中的實(shí)現(xiàn)步驟講解詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考價值,需要的可以參考一下

代碼示例

<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(){
            //獲取列表數(shù)據(jù)
			this.init();
			//獲取打印次數(shù)
			this.getPrintsSum()
		},
		methods: {
			//獲取列表數(shù)據(jù)
			init() {
				getPrintList(this.page).then((res) => {
					if (res && res.code === 200) {
						this.tableData = res.data.recordList;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			//獲取打印次數(shù)
			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文件的預(yù)覽
			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. 先將數(shù)據(jù)轉(zhuǎn)換成json，看下是否是異常
				try {
					blobToJson(data).then((json) => {
						_self.$message.error(json.msg || "未能正確加載文件");
						_self.clearBox()
					}).catch((e) => {
						deal()
					})
				} catch (e) {
					_self.$message.error("未能正確加載文件");
					_self.clearBox()
				}
			},
			//預(yù)覽
			onChangeView(row) {
				this.dataFile = row
				provePreview({
					proveId: row.proveId
				}).then((res) => {
					this.showPdfPreview(res)
					//獲取打印次數(shù)
					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) {
						//獲取打印次數(shù)
						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>

預(yù)覽接口preview.js

/**
 * 證明預(yù)覽
 * @param {*} data pdf文件流
 * @returns
 */
export function provePreview(data) {
	return request({
		url: "/layout/api/view",
		method: "post",
		data: data,
		responseType: 'blob',	//一定要設(shè)置響應(yīng)類型，否則頁面會是空白pdf
		contentType: "application/json;charset=UTF-8"
	});
}

實(shí)現(xiàn)步驟說明

這段代碼我定義了一個 blobToJson 的函數(shù)，主要是將 Blob 類型的數(shù)據(jù)轉(zhuǎn)化為 JSON 對象。

實(shí)現(xiàn)步驟如下：

創(chuàng)建一個 Promise 對象，用于異步處理數(shù)據(jù)轉(zhuǎn)換
再創(chuàng)建一個 FileReader 對象，用于讀取 Blob 類型的數(shù)據(jù)
通過 FileReader 對象的 readAsText() 方法，將 Blob 數(shù)據(jù)以文本形式讀取出來，并指定編碼格式為 UTF-8
在 FileReader 對象的 onload 方法中，通過 try...catch 將讀取到的文本數(shù)據(jù)解析成 JSON 對象，并將解析后的結(jié)果作為 Promise 的 resolve 返回值。若是解析失敗，則將錯誤信息作為 reject 返回值。
若是出現(xiàn)了異常，可使用 Promise 的 catch 方法進(jìn)行捕獲和處理。

clearBox() 方法

clearBox() 方法：在關(guān)閉文件預(yù)覽時，清空預(yù)覽區(qū)域的內(nèi)容，以便下次預(yù)覽文件時重新加載新的內(nèi)容。

實(shí)現(xiàn)步驟如下：

將 viewShow 設(shè)置為 false，即隱藏文件預(yù)覽區(qū)域。
通過 document.querySelector("#viewBox") 獲取到文件預(yù)覽區(qū)域的 DOM 元素。
使用 while 循環(huán)，在文件預(yù)覽區(qū)域內(nèi)移除所有子元素，直到?jīng)]有子元素為止。

showPdfPreview()方法

showPdfPreview()方法：用于展示PDF文件的預(yù)覽，并對異常情況進(jìn)行處理。

在展示預(yù)覽之前，先將數(shù)據(jù)轉(zhuǎn)換成json格式，如果轉(zhuǎn)換過程中出現(xiàn)異常，則顯示錯誤消息并清空文件預(yù)覽區(qū)域；如果轉(zhuǎn)換成功，則進(jìn)行具體的展示邏輯。

實(shí)現(xiàn)步驟如下：

創(chuàng)建一個deal函數(shù)，用于處理展示PDF預(yù)覽的具體邏輯。
在deal函數(shù)中，首先調(diào)用clearBox方法清空文件預(yù)覽區(qū)域的內(nèi)容。
將傳入的code賦值給組件的code屬性，用于在展示預(yù)覽時進(jìn)行標(biāo)識。
調(diào)用queryCount方法查詢打印次數(shù)。
創(chuàng)建一個iframe元素，并設(shè)置id為'iframe'，設(shè)置frameborder為0。
使用Blob對象將傳入的data轉(zhuǎn)換為Blob類型，并設(shè)置type為'application/pdf'。
通過URL.createObjectURL方法生成PDF文件的URL。
將生成的PDF URL賦值給iframe的src屬性，添加到文件預(yù)覽區(qū)域，并設(shè)置寬度和高度為100%。
將iframe添加到文件預(yù)覽區(qū)域中。
將組件的viewShow屬性設(shè)置為true，顯示文件預(yù)覽區(qū)域。
使用try-catch-finally語句對異常進(jìn)行處理。
在try塊中，首先將data轉(zhuǎn)換為json格式，判斷是否存在異常。若有異常，顯示錯誤消息并調(diào)用clearBox方法清空文件預(yù)覽區(qū)域。
在catch塊中，捕獲到異常時，顯示錯誤消息并調(diào)用clearBox方法清空文件預(yù)覽區(qū)域。
在finally塊中，關(guān)閉加載狀態(tài)。