最近经常会有针对pdf文档类型进行操作的需求，后端返回的格式都是Base64，需要前端进行预览或者下载等操作。
方案一、利用iframe标签直接显示
原理是利用iframe的src绑定Base64编码可以直接展示，
缺点是移动端无法展示，会显示白板，优点是超级简单，下面都是以Vue环境来举例子，不再重复。
//template部分
<template>
<iframe :src="getSrc(item)" frameborder="0"
style="left: 0;width: 100%;height: 100%;right: 0;top: 0;border: 0;"></iframe>
</template>
//script部分
<script>
data(){
return {
item:{
pdfBase64:'xxxxxxxx';//替换成实际base64字符串
}
}
},
computed: {
getSrc() {
return function (item) {
let vSrc = ''
vSrc = 'data:application/pdf;base64,' + item.pdfBase64
return vSrc
}
},
},
</script>
方案二、vue-pdf实现
首先如果仅仅是用于纯vue项目，看vue-pdf实现pdf文件在线预览这篇帖子就够了，关键代码如下：
<template>
<div>
<pdf ref="pdf" :src="row"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
row:{
imageBase64:"xxxxxxxx",//替换实际base64编码
},
}
},
computed: {
getSrc() {
return function (row) {
let vSrc = ''
vSrc =
'data:application/pdf;base64,' + row.imageBase64
vSrc = pdf.createLoadingTask(vSrc)；//将base64编码转换成pdf对象
return vSrc
}
},
},
</script>
但是我按照这篇帖子一通操作后提示如下图报错
error.png
经过一番查询思考后，发现应该不是该插件问题。后来发现可能问题出在我用的是nuxt环境，因为是ssr服务端渲染，在引用插件（ NuxtJS项目——插件）这块，需要注意插件到底是在服务端还是客户端使用，所以需要特殊处理一下，参考nuxt 使用 vue-pdf ，解决报错,完美使用。
关键代码如下：
//pdf.js文件
import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)
//挂载到全局，用于 createLoadingTask 功能
export default function ({ app, redirect }, inject) {
inject('pdf', pdf);
}
//nuxt.config.js文件
plugins: [{ src: '~/plugins/pdf.js', ssr: false }]
小插曲 Fix render method missing catch statement on render failure
添加上面的插件部分代码后我信心满满的以为彻底没问题，然而最后关头尽然给我报错了，那一刻我差点就要崩溃了，网上到处查这个报错也没有靠边的帖子（再次吐槽百度真垃圾）。后来经过好心同事提醒，直接去vue-pdf上的issue上看问题才找到这篇帖子338 - Fix render method missing catch statement on render failure，发现是版本问题，于是我将版本降到v4.2.0后成功解决该问题，不容易啊，最后这个问题卡了我好久。
方案二代码汇总
<template>
<div>
<pdf ref="pdf" :src="row"></pdf>
</div>
</template>
<script>
export default {
data(){
return {
row:{
imageBase64:"xxxxxxxx",//替换实际base64编码
},
}
},
computed: {
getSrc() {
return function (row) {
let vSrc = ''
vSrc =
'data:application/pdf;base64,' + row.imageBase64
vSrc = this.$pdf.createLoadingTask(vSrc)；//将base64编码转换成pdf对象
return vSrc
}
},
},
</script>
//pdf.js文件
import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)
//挂载到全局，用于 createLoadingTask 功能
export default function ({ app, redirect }, inject) {
inject('pdf', pdf);
}
//nuxt.config.js文件
plugins: [{ src: '~/plugins/pdf.js', ssr: false }]
