vue 工程pdf在线预览

最新推荐文章于 2025-10-23 01:55:09 发布

原创

最新推荐文章于 2025-10-23 01:55:09 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pdf在线预览

本文介绍了如何在Vue项目中利用pdfjs-dist库进行PDF在线预览。首先，详细说明了安装指定版本pdfjs-dist以避免导入错误的步骤，然后讲解了如何在工程中实际应用该库进行预览。最后，提到了该方法仅支持PDF显示，不支持复制功能，但提供了支持复制功能的进一步写法。

使用pdfjs-dist实现vue工程pdf在线预览

1、安装（我安装的是这个版本，安装最新的版本在文件中import时会报错：You may need an appropriate loader to handle this file type）

npm install -s pdfjs-dist@2.0.943

2、使用

<template>
  <div>
    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist"

export default {
  name: "pdfPreview",
  data(){
    return {
      pdfDoc: null,
      pages: 0
    }
  },
  mounted() {
    this.showPdf()
  },
  methods: {
    showPdf: function () {
      // 请求本地文件
      // let url = '/static/player.pdf'
      // 跨域请求文件，需要走后台代理，后台需要将文件流返回前端才可在页面显示
      // let url = '/pdf/showPdf?pdfUrl=http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
      let url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
      this.loadFile(url)
    },
    renderPage: function (num) {
      let