vue前端使用pdf.js 实现pdf网页预览效果

vue前端使用pdf.js 实现pdf网页预览效果

前言

最近，在vue项目中需要用到在线预览pdf功能，首先想到了pdf.js插件。pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。不需要本地浏览器额外支持。

准备

• 下载pdfjs—免积分下载
• 注意：只能在服务器使用本地在不能预览。
• 服务器centos

很多人在用pdfjs的时候会发现网上的教程都用不了，因为一点击就会弹出一个新的浏览器标签而不是pdf预览页。经过实际使用发现，pdfjs的使用貌似必须部署到服务器之后才能使用，跟着我下面的步骤即可完成pdf预览效果。

也可使用vscode的Live Server插件（index.html上点击右键选择Open with Live Server自动打开浏览器）进行预览。

使用

1. 服务器安装nginx
2. 将前端项目放到 /nginx/html下（也可以放到自己定义的地方需要修改nginx配置）
   
3. pdfjs文件夹结构
   

vue部分

与下载pdf类似下载部分可以查看之前的博客https://blog.csdn.net/baidu_35259515/article/details/119544650

点击预览触发previewReport方法传入行数据

previewReport(params){
	this.fullscreenLoading = true
	setTimeout(() => {
	   this.fullscreenLoading = false
	   }, 10000);
	downloadGaitApi(params.id).then(res => {
	   const  blob = new Blob([res], {type: 'application/octet-stream'});
	   const pdfUrl = window.URL.createObjectURL(blob);		//关键:生成url
	   console.log(pdfUrl);	
	   window.open('../pdfjs/web/viewer.html?file=' + 	encodeURIComponent(pdfUrl));		//将url输入到pdfjs中
	}).catch(()=>{
	   this.fullscreenLoading = false
	});
	this.fullscreenLoading = false
	window.URL.revokeObjectURL(url);
	},

参考之前的