vue中下载PDF文件

vue下载pdf文件

fetch("PDF的地址", {
  method: 'get',
  responseType: 'arraybuffer',
}).then(res => {
  if (res.status !== 200) {
    return res.json()
  }
  return res.arrayBuffer()
}).then(blobRes => {
  // 生成 Blob 对象,设置 type 等信息
  const e = new Blob([blobRes], {
    type: 'application/octet-stream',
    'Content-Disposition':'attachment'
  })
  // 将 Blob 对象转为 url
  const link = window.URL.createObjectURL(e)
  let a = document.createElement('a');
  a.href = link;
  a.download = "名称";
  a.click();
}).catch(err => {
  console.error(err)
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 实现 PDF 文件下载可以通过以下步骤进行操作: 1. 在后端 API ,确保你的接口返回的响应头包含了正确的-Type 和 Content-Disposition,以告诉浏览器该文件是一个 PDF 文件,并且需要下载而不是在浏览器打开。 2. 在 Vue 组件,你可以使用 axios 或者其他类似的库来发送请求到后端 API 获取 PDF 文件的数据。 3. 一旦你收到了响应数据,你可以创建一个 Blob 对象,并将返回的数据作为 Blob 的内容。然后,你可以使用 URL.createObjectURL() 方法生成一个临时的 URL,用于创建一个可下载的链接。 4. 在你的组件创建一个下载按钮或者链接,并将上一步生成的临时 URL 赋值给该按钮或者链接的 href 属性。这样用户点击该按钮或者链接时,浏览器会自动下载PDF 文件。 下面是一个简单的示例代码: ```vue <template> <div> <a :href="downloadUrl" download="file.pdf">下载 PDF</a> <button @click="downloadPdf">点击下载</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { downloadUrl: '' }; }, methods: { downloadPdf() { axios({ url: 'your-api-endpoint', method: 'GET', responseType: 'blob' // 设置响应类型为 blob }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); this.downloadUrl = url; }); } } }; </script> ``` 在上面的示例,你可以通过点击按钮或者链接来触发 `downloadPdf` 方法,该方法会发送一个 GET 请求到你的后端 API,并将响应数据转换为 Blob 对象。然后,我们使用 `window.URL.createObjectURL()` 方法创建一个临时 URL,并将其赋值给 `downloadUrl` 变量。最后,我们将该临时 URL 赋值给下载链接的 href 属性,从而实现 PDF 文件下载。 请注意,以上示例仅为演示如何在 Vue 实现 PDF 文件下载的基本思路,具体实现可能会因你的后端 API 结构和需求而有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值