vue 工程pdf在线预览_vue-pdf-embed官网-CSDN博客

本文链接：https://blog.csdn.net/cxy_12345/article/details/118602032

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

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

使用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 _this = this
      this.pdfDoc.getPage(num).then(function (page) {
        let canvas = document.getElementById('the-canvas' + num)
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1.0
        let