Vue学习之：在 vue2 中引入 pdf.js 并配置使其能工作

在 Vue 2 项目中引入 pdf.js 并进行配置，以确保其能正常工作，你需要按照以下步骤操作：

1. 安装 pdf.js：

npm install pdfjs-dist

2. 在 Vue 组件中引入 pdf.js 库并使用。

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  name: 'PdfViewer',
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then(
        (pdf) => {
          console.log('PDF loaded');
          // Fetch the first page of the PDF
          const pageNumber = 1;
          pdf.getPage(pageNumber).then((page) => {
            // Get viewport (dimensions)
            const viewport = page.getViewport({ scale: 1.5 });
            // Get canvas#pdfCanvas element
            const canvas = this.$refs.pdfCanvas;
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            // Render the page
            const renderContext = {
              canvasContext: context,
              viewport: viewport,
            };
            page.render(renderContext).promise.then(() => {
              console.log('Page rendered');
            });
          });
        },
        (reason) => {
          console.error('Error loading PDF: ', reason);
        }
      );
    },
  },
};
</script>

在这个例子中，我们创建了一个名为 PdfViewer 的 Vue 组件，它接收一个 pdfUrl 属性，该属性是要加载的 PDF 文件的 URL。组件在 mounted 钩子中调用 loadPdf 方法，该方法使用 pdfjsLib.getDocument 来获取 PDF 文档，然后获取第一页并渲染到 <canvas> 元素中。

确保你的 Vue 项目配置能正确处理 PDF.js 的 ES 模块导入。如果你使用的是 webpack 和 vue-loader，通常这些配置已经是默认的。如果遇到路径或者版本相关的问题，请检查 pdfjs-dist 包的版本和导入路径是否正确。