vue实现在线预览pdf文件和下载（pdf.js）

首先，我们需要明确一下，在线预览和下载PDF文件需要借助于开源的PDF.js库。这个库是Mozilla基金会开发的，可以在Web上直接呈现PDF文档。

接下来，我们将学习如何使用Vue.js和PDF.js库，实现在线预览和下载PDF文件的功能。

步骤一：安装依赖

我们首先需要在Vue项目中安装pdf.js库。

在命令行输入：

npm install pdfjs-dist

安装完成后，在Vue项目的main.js文件中，将pdf.js库引入：

import pdfjsLib from 'pdfjs-dist';

步骤二：创建Vue组件

我们可以在Vue组件中创建一个button，点击这个button后，我们就可以在线预览和下载PDF文件。

<template>
  <button @click="previewPDF">在线预览PDF文件</button>
  <button @click="downloadPDF">下载PDF文件</button>
</template>

步骤三：编写预览PDF的代码

为了在线预览PDF，我们需要编写如下代码。

previewPDF() {
  // 获取PDF文件的地址
  const pdfUrl = '/path_to_pdf_file.pdf';
  // 加载PDF文件
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    // 获取PDF页数
    const pages = pdf.numPages;
    // 获取第一页
    pdf.getPage(1).then(page => {
      // 获取Canvas对象
      const canvas = document.getElementById('pdf_viewer');
      const context = canvas.getContext('2d');
      // 获取页面内容
      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      page.render({
        canvasContext: context,
        viewport: viewport
      });
    });
  });
}

代码中，我们首先获取PDF文件的地址，然后使用pdfjsLib.getDocument()方法加载文档。加载完成后，我们通过pdf.numPages获取PDF文件的页数，然后通过pdf.getPage()方法获取第一页的内容。最后，我们使用Canvas渲染页面内容。

步骤四：编写下载PDF的代码

为了下载PDF文件，我们需要编写如下代码：

downloadPDF() {
  const pdfUrl = '/path_to_pdf_file.pdf';
  // 将PDF文件转换为字节数组
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    const total = pdf.numPages;
    const array = [];
    for(let i = 1; i <= total; i++) {
      pdf.getPage(i).then(page => {
        page.getTextContent().then(text => {
          text.items.forEach(item => {
            array.push(item.str);
          });
        });
      });
    }
    // 将字节数组转换为Blob对象
    const blob = new Blob([array.join("")], { type: "application/pdf" });
    // 创建下载链接
    const url = URL.createObjectURL(blob);
    // 下载文件
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.pdf';
    document.body.appendChild(link); // 修复Firefox中无法触发click的bug
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  });
}

代码中，我们首先获取PDF文件的地址，然后使用pdfjsLib.getDocument()方法将PDF文件转换为字节数组，使用Blob对象将字节数组转换为PDF文件，最后使用HTML5的download属性和click()方法下载。

示例一：对于在线预览：

<template>
  <div>
    <!-- 页面中的Canvas对象 -->
    <canvas id="pdf_viewer"></canvas>
    <button @click="previewPDF">在线预览PDF文件</button>
  </div>
</template>

<script>
// 引入pdf.js依赖
import pdfjsLib from 'pdfjs-dist';

export default {
  methods: {
    previewPDF() {
      // 获取PDF文件的地址
      const pdfUrl = '/path_to_pdf_file.pdf';
      // 加载PDF文件
      pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
        // 获取PDF页数
        const pages = pdf.numPages;
        // 获取第一页
        pdf.getPage(1).then(page => {
          // 获取Canvas对象
          const canvas = document.getElementById('pdf_viewer');
          const context = canvas.getContext('2d');
          // 获取页面内容
          const viewport = page.getViewport({ scale: 1 });
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          page.render({
            canvasContext: context,
            viewport: viewport
          });
        });
      });
    }
  }
}
</script>

在这个示例中，我们在模板中添加了一个Canvas元素和一个button按钮。当我们点击button按钮时，触发previewPDF()方法，通过PDF.js库将pdf文件的第一页渲染到页面上。

示例二：对于下载PDF：

<template>
  <button @click="downloadPDF">下载PDF文件</button>
</template>

<script>
// 引入pdf.js依赖
import pdfjsLib from 'pdfjs-dist';

export default {
  methods: {
    downloadPDF() {
      const pdfUrl = '/path_to_pdf_file.pdf';
      // 将PDF文件转换为字节数组
      pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
        const total = pdf.numPages;
        const array = [];
        for(let i = 1; i <= total; i++) {
          pdf.getPage(i).then(page => {
            page.getTextContent().then(text => {
              text.items.forEach(item => {
                array.push(item.str);
              });
            });
          });
        }
        // 将字节数组转换为Blob对象
        const blob = new Blob([array.join("")], { type: "application/pdf" });
        // 创建下载链接
        const url = URL.createObjectURL(blob);
        // 下载文件
        const link = document.createElement('a');
        link.href = url;
        link.download = 'file.pdf';
        document.body.appendChild(link); // 修复Firefox中无法触发click的bug
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      });
    }
  }
}
</script>

在这个示例中，我们在模板中添加了一个button按钮。当我们点击button按钮时，触发downloadPDF()方法，将pdf文件转换为字节数组，将字节数组转换为Blob对象，最后通过HTML5的download属性和click()方法下载。