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

最新推荐文章于 2025-04-16 09:58:02 发布

Liszter

最新推荐文章于 2025-04-16 09:58:02 发布

阅读量5k

点赞数 3

分类专栏： vue组件篇文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_39198394/article/details/111287788

版权

vue组件篇专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-pdf插件实现PDF预览，并解决了中文显示问题。遇到的诡异现象是首次预览后无法打开后续PDF，通过引入CMapReaderFactory解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件 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/pdfjs-dist@2.5.207/cmaps/',
      cMapPacked: true })
    },