Vue实现pdf下载后弹窗预览

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

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

下面是具体的实现步骤：

安装依赖：

npm install pdfjs-dist vue-pdf --save

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

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

定义一个方法，用于下载 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();
});
}

在组件中使用 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 文件并以弹窗的形式呈现在页面上。