Vue实现pdf下载后弹窗预览

要实现这个功能，我们需要用到以下两个库：

1. `pdfjs-dist`：用于解析 PDF 文件并将其转换为可供浏览器渲染的 HTML。
2. `vue-pdf`：一个 Vue 组件，用于在页面上呈现 PDF 文件。

下面是具体的实现步骤：

1. 安装依赖：

npm install pdfjs-dist vue-pdf --save

2. 在 Vue 组件中引入所需的库：

import pdfjsLib from 'pdfjs-dist/webpack';
import VuePdf from 'vue-pdf';

3. 定义一个方法，用于下载 PDF 文件：

downloadPdf() {
  const url = 'your_pdf_url';
  axios.get(url, { responseType: 'blob' }).then(response => {
    const blob = new Blob([response.data], { type: 'application/pdf' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'your_pdf_name';
    link.click();
  });
}

4. 在组件中使用 `vue-pdf` 组件：

<template>
  <div>
    <button @click="downloadPdf">下载 PDF</button>
    <vue-pdf :src="pdfSrc" :show-toolbar="true"></vue-pdf>
  </div>
</template>

<script>
  import pdfjsLib from 'pdfjs-dist/webpack';
  import VuePdf from 'vue-pdf';

  export default {
    components: {
      VuePdf
    },
    data() {
      return {
        pdfSrc: ''
      };
    },
    methods: {
      downloadPdf() {
        // 下载 PDF 文件的代码
      }
    },
    mounted() {
      const url = 'your_pdf_url';
      pdfjsLib.getDocument(url).promise.then(pdf => {
        this.pdfSrc = pdf;
      });
    }
  };
</script>

这样，当用户点击下载按钮时，会下载 PDF 文件并以弹窗的形式呈现在页面上。