vue移动端PDF预览

pdf预览在项目中是很常见的，PC端可以直接打开一个新窗口预览，因为这里的PDF是一个支持下载的PDF， 所以在移动端打开PDF链接时候是让下载，然后就想到了在页面上展示/预览PDF的内容，下面是我的具体操作步骤, 在此记录一下。

-------------------------------------------- 分割线 --------------------------------------------
2020-09-03补充内容: 今日又在vue中读取PDF文件, 结果报错this.pdfSrc.then is not a function, 报错信息如下图。查了半天发现少了一个promise

解决办法见下面js部分代码, 帮到你们的话, 就动动小手指给我点个赞鼓励一下吧~
-------------------------------------------- 分割线 --------------------------------------------

vue中安装依赖

npm install --sava vue-pdf

一般PDF都是多页的, 当然插件也是支持多页的, 移动端上下滑动即可查看PDF。

多页展示

html部分

<pdf
      v-for="i in numPages"
      ref="pdfs"
      :src="pdfSrc"
      :key="i"
      :page="i"
    >
</pdf>

js部分

<script>
	import pdf from 'vue-pdf' // 引入vue-pdf插件
	export default {
		name: 'protocol',
		components: {pdf}, // 注册PDF组件
		data() {
			return {
				pdfSrc: '', // PDF文件路径
                numPages: []
			}
		},
		methods: {
			getProtocol() {
				this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
				// console.log('pdfSrc', this.pdfSrc)
				// this.pdfSrc.then(pdf => { // 此行为错误示例, 报错this.pdfSrc.then is not a function
				this.pdfSrc.promise.then(pdf => {
					// console.log('pdf', pdf)
					this.numPages = pdf.numPages
				})
			}
		}
	}
</script>

小米机型PDF预览问题

vue-pdf提供的props:src可以传入pdf的url地址，也可以base64字符串。但在小米机型下，使用线上url地址时，pdf加载不出来。这里，我们可以统一让后台处理下,返回base64字符串，这样在移动端任何机型下都能完整加载出pdf内容。

this.pdfSrc = `data:application/pdf;base64,${res.pdfBase64Str}`