一、预览PDF
预览PDF需要借助 vue-pdf 这个组件
安装
npm install vue-pdf
在组件中使用
<template>
<pdf :src=pdfUrl ></pdf>
</template>
<script>
import pdf from 'vue-pdf'
exprot default {
components: {
pdf
},
data() {
pdfUrl: ''
},
methods: {
//写方法，调取后台接口，得到返回的url给pdfURL赋值即可
}
}
</script>这样就能满足pdf的预览了，但是只能展示第一页pdf，如果pdf是多页，可以使用for循环加载所有页面
<template>
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
></pdf>
</template>
<script>
import pdf from 'vue-pdf'
exprot default {
components: {
pdf
},
data() {
numPages: undefined,
src: ''
},
methods: {
getUrlFuc(){
axios接口.then( res => {
//res.data.url 就是接口返回的pdf在线地址
this.src = pdf.createLoadingTask(res.data.url)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
})
})
}
}
}
</script>二、下载pdf
pdf的URL直接打开的话是网页预览界面，而不是文件下载，文件下载需要的是二进制数据，但是如果接口返回的是在线链接，那么可以通过以下操作进行格式转化再去下载
创建一个方法downloadPDF()，接收一个在线URL地址，然后使用axios发送GET请求获取PDF文件的二进制数据。
import axios from 'axios';
methods: {
async downloadPDF(pdfUrl) {
const response = await axios({
url: pdfUrl,
method: 'GET',
responseType: 'blob', // 必须指定为blob类型才能下载
});
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();
},
}
在这个方法中，我们先使用axios发送GET请求，然后设置响应类型为blob，这样响应内容将会是一个二进制数据。接下来我们创建一个URL对象，以便在浏览器中访问该PDF文件，然后创建一个a标签并设置其href属性为该URL对象的值。为了将其下载到本地，我们还需要设置download属性为file.pdf。之后将该a标签附加到文档中并调用其click()方法即可下载该PDF文件。
在Vue模板中使用该方法
在Vue模板中，你只需要调用downloadPDF()方法并传入PDF文件的URL地址即可：
<button @click="downloadPDF('https://example.com/file.pdf')">下载PDF文件</button>
这将会在点击该按钮时调用downloadPDF()方法并下载名为file.pdf的PDF文件。
注意：如果你的PDF文件需要授权才能访问，则需要在请求头中包含相应的授权信息。具体内容可以参考axios官方文档。
vue-pdf打包发生产环境上 ***worker.js 出现跨域问题报错，我参考了以下文章得到解决，记录一下。