安卓手机 H5 预览 PDF 文件，自动直接下载的问题

背景

有一个需求，vue 开发 pc 端，uniapp 写 h5 移动端，两个页面都有个 PDF 预览的功能。之前的做法是直接在新标签打开附件地址，现在浏览器也都支持 PDF 直接打开功能，并且上边一般都会有下载、放大缩小等按钮。

现在要求预览 PDF 的时候，不能有下载按钮。pc 端比较好搞，可以使用 #toolbar=0 来拼接到附件链接尾部，这样浏览器就会隐藏掉顶部的操作按钮。

window.open(fileUrl + '#toolbar=0', '_blank');

移动端

IOS 端使用上边的方法是没有问题的，打开的新标签也会隐藏顶部按钮区域，但是安卓系统会直接把链接中的附件下载下来。为了保证两个的一致性，可以使用 pdfh5 插件来做一个兼容处理。

第一步：引入 pdfh5.js

  npm install pdfh5
  import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";

第二步：创建一个 div 容器，用于展示 PDF

<div id="pdfh5"></div>

第三步：实例化

    onLoad() {
			this.$nextTick(() => {
				this.initPdf()
			})
		},
		methods: {
			initPdf() {
				this.filePreview = this.$route.query.url
				if (this.pdfh5) {   //为了避免频繁创建pdf实例，先销毁之前的实例
					this.pdfh5.destroy()
					this.pdfh5 = null
				}
				this.pdfh5 = new Pdfh5('#pdfh5', {

					pdfurl: this.filePreview,
					// pdfurl和data二选一
          			// data:pdf文件流 // array，如果是base64编码，需要先使用atob()转为二进制字符串
				});
			}
		}

上边之所以要在 nextTick 中实例化，是因为在页面加载的时候，div 容器可能还没有渲染完成，所以需要等页面渲染完成后再实例化。

另外

因为这个插件依赖 canvas，所以项目中如果没有需要先安装 canvas，不然会报错。安装时候可能因为镜像的问题，没有安装成功，可以使用下边的命令。

npm install canvas --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas