前端实现PDF预览

PDF预览

第一次做PDF相关的功能，PC端和移动端都要做，查了很多资料，网上也有很多插件，但是很乱，很少有符合业务需求。尝试了各种方案，总结一下本次做完的东西。

PC端

在PC端做PDF预览有几个方案：
1.直接使用iframe；
可以直接在网页中使用iframe标签，src中放入需要展示的PDF的接口地址，如果觉得工具栏太多的很丑的可以在src地址后加上“#toolbar=0”。这样可以做个弹窗预览（移动端不建议用这个，本人测试时安卓真机浏览器无法展示）

<iframe :src="previewUr+‘#toolbar=0’" width="100%" height="100%">

2. 使用PDFObject.js进行展示；
   PDFObject实际上也是通过标签实现，通过引入PDFObject.js的文件，通过JS在页面中插入一个embed的标签。预览展示效果和iframe相似，还可以自定义一些参数配置。pdfobject.js

var options = {
    height: "400px",
    pdfOpenParams: { view: 'FitV', page: '2' }
};
PDFObject.embed("myfile.pdf", "#my-container", options); 

3. pdf.js,这是一个很大的库，好几M,而且npm装上的时候package.json文件多了一倍，不知道是我的问题还是这个库的问题（菜鸡疑惑），加上这个库很大，就没采用这个；
4. vue-pdf这是一个封装好的基于pdf.js的库，具体使用方式可以查一下百度，略大，使用预览和下载功能很方便，但是使用过程中，打印会出现中文乱码的BUG，需要改项目源码，由于是团队项目,moudle里的代码要改不现实，故也放弃了。（可以打补丁包）；
   PC端尝试了以上几种方式，都可以实现预览效果，具体使用什么，可以根据具体业务要求选择

移动端

移动端预览和PC端预览稍有不同，移动端预览需要考虑真机效果，以及小程序所。使用了uniapp框架，需要适配三端。
移动端预览有如下几个方案
1、pdfh5.js
这个库npm安装即可，比较合适移动端H5端使用，但小程序上应用不了无法展示
2、webview
webview这个可以通用但是在小程序端无法引用网络地址，需要将url 放在网络服务器上。
H5端可以使用webvie
小程序端可以用uniapp的自带api自动打开文档，但是需要先下载

uni.downloadFile({ 
				  url:this.allUrl,
				  success: function (res) {
					 console.log(res,'res');
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});