最近经常会有针对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

//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 }]