前端在旧版浏览器预览PDF文件

场景

旧版浏览器无法支持PDF文件在线预览，虽然有adobe reader这个软件可以支持iframe在线预览，但让每个使用旧版浏览器的用户去安装这个软件是个不现实的事情，而且对用户也不友好。所以在网上找了资料后，使用了pdf.js这个插件来解决旧版浏览器的兼容性问题。

使用方法

引入pdf.js

上面的图片是pdf.js插件包，将这个包放在public 目录下，确保打包后也能访问。官网地址为: pdf.js，我使用的版本是: v2.5.207，并不是最新的版本，原因是最新版本的写法换成了es6，导致在旧版浏览器中无法使用，所以使用的是较旧版本的插件包。至于从哪个版本开始更换写法，感兴趣的同学可以去官网看源码研究一下，我这里只提供我自己在使用的可行版本。

写法

我使用的是vue的写法，其他写法同理
vue代码如下：

<iframe :src="pdfUrl"></iframe>

data(){
	return {
		pdfUrl:""
	}
}

pdf如果是在本地，即前端项目内或本地其他路径，则pdfUrl按如下方式定义：

this.pdfUrl="/legacy/web/viewer.html?file=/legacy/web/compressed.tracemonkey-pldi-09.pdf"

pdf如果是在后台服务器，通过流传输，则pdfUrl按如下方式定义：

const binaryData = []
binaryData.push(res)	//res为返回的流
let pdfUrl = ''
pdfUrl = window.URL.createObjectURL(new File(binaryData,'pdf',{
	type:'application/pdf;chartset=utf-8'
}))
this.pdfUrl="/legacy/web/viewer.html?file="+encodeURIComponent(pdfUrl)

鸣谢

在这里我要感谢一下linong大佬给我的思路和私信回复，大佬的文章在 这里，写的思路和方案都很全面，我只是在此基础上完善了pdf.js这个插件包在旧版浏览器上的使用方法，有想深入了解的同学可以移步到大佬文章。