vue实现预览pdf组件(vue-pdf插件使用)

组件 PriviewPdf

• 简易版 (页尾是完整版)

<template>
  <div class="priview-pdf-img">
	<pdf :pdfUrl="pdfSrc"></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'priview-pdf',
  components: {
    pdf
  },
  props: {
    // 外部传递pdfUrl 即可
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  computed: {
    pdfSrc () {
      return this.pdfUrl
    }
  }
}
</script>

• 页面

	<priview-pdf pdfUrl="文件地址"></priview-pdf>

• 思路

  • 安装 vue-pdf 插件
  • 按需引入 import pdf from 'vue-pdf'
  • 当一个组件使用 components: { pdf }

• 可能遇到的问题

  • 预览时 不能显示中文，特别是发票之类的pdf.
  • 解决方案：
    • 引入 import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
    • 传入的pdfUrl 改为 pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory })

• 解决中文无法显示的版本

<template>
  <div class="priview-pdf-img">
	<!--  自己设置图片路径-->
    <img src="@/assets/pdfInit.png" @click="dialogPriviewPdf = true" alt="" />
    <el-dialog title="预览" :visible.sync="dialogPriviewPdf"  top="5vh" append-to-body>
      <pdf :src="pdfSrc" ref="pdf"></pdf>
    </el-dialog>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  name: 'priview-pdf',
  components: {
    pdf
  },
  props: {
    // 外部传递pdfUrl 即可
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dialogPriviewPdf: false
    }
  },
  computed: {
    pdfSrc () {
      return pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory })
    }
  }
}
</script>
<style lang="less" scoped>
.priview-pdf-img {
  img {
    width: 100px;
    height: 100px;
  }
}
  & /deep/ .el-dialog {
    width: 80%;
    overflow-y: auto;
  }
</style>

··· 生产中出现了一种诡异的情况， 打开第一个pdf后 ，不能打开其他的pdf了
··· 解决方法

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
 pdfSrc (val) {
      const that = this
      return pdf.createLoadingTask({ url: val, cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
      cMapPacked: true })
    },