vue 根据接口返回的url预览pdf和下载pdf文件

您所在的位置：网站首页 › pdf文件模板下载 › vue 根据接口返回的url预览pdf和下载pdf文件

vue 根据接口返回的url预览pdf和下载pdf文件

2024-07-05 18:18| 来源: 网络整理| 查看: 265

一、预览PDF

预览PDF需要借助 vue-pdf 这个组件

安装

npm install vue-pdf

在组件中使用

import pdf from 'vue-pdf' exprot default { components: { pdf }, data() { pdfUrl: '' }, methods: { //写方法，调取后台接口，得到返回的url给pdfURL赋值即可 } }

这样就能满足pdf的预览了，但是只能展示第一页pdf，如果pdf是多页，可以使用for循环加载所有页面

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 }) }) } } }

二、下载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地址即可：

下载PDF文件

这将会在点击该按钮时调用downloadPDF()方法并下载名为file.pdf的PDF文件。

注意：如果你的PDF文件需要授权才能访问，则需要在请求头中包含相应的授权信息。具体内容可以参考axios官方文档。

vue-pdf打包发生产环境上 ***worker.js 出现跨域问题报错，我参考了以下文章得到解决，记录一下。

使用vue-pdf打包生成***.worker.js，在使用cdn后跨域问题

【本文地址】

vue 根据接口返回的url预览pdf和下载pdf文件

vue 根据接口返回的url预览pdf和下载pdf文件

今日新闻

推荐新闻