vue base64转化pdf格式下载提示未能加载PDF文档

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
从后端接收base64格式数据,前端转换之后报未能加载pdf文档,于是找了一下解决方式,以下方法可以用,也解决了我的问题,在这里我也做一下保留

this.$axios.post(`/xxxxxxxxxxxxxxxxxx/download?id=${row.ID}`,{responseType:'arraybuffer'}).then(res=>{
  if(res.data.data) {
    var binary_string = window.atob(res.data.data)
    var len = res.data.data.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    let blob = new Blob([bytes.buffer], { type: 'application/pdf' })
    var url = URL.createObjectURL(blob);
    
    // 预览 
    // window.open(url);
    
    // 下载
    let a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = fileName + '.pdf'; //命名下载名称
    a.click(); //点击触发下载
    window.URL.revokeObjectURL(url);  //下载完成进行释放
 
  } else {
    this.$message.error(e.data.message);
  }
}).catch(err=>{})

上述代码,我的是接口无法写上{responseType:‘arraybuffer’},不然没有任何回应,不加上就下载成功了

参考地址

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你可以使用 FileSaver.js 库和 pdf.js 库来将 base64 字符串转换为 PDF 文件并下载。 首先,在你的 Vue 项目中安装这两个库: ``` npm install file-saver pdfjs-dist ``` 然后,在你的组件中引入它们: ```javascript import { saveAs } from 'file-saver'; import pdfjsLib from 'pdfjs-dist'; ``` 接下来,你需要编写一个函数来将 base64 字符串转换为 Blob 对象和 PDF 文件。这个函数将使用 pdf.js 将 Blob 对象转换为 PDF 文件,并使用 FileSaver.js 下载它: ```javascript methods: { downloadPDF(base64String, fileName) { const byteCharacters = atob(base64String); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); const blob = new Blob([byteArray], { type: 'application/pdf' }); pdfjsLib.getDocument({ data: byteArray }).promise.then(pdf => { pdf.getPage(1).then(page => { const scale = 1.5; const viewport = page.getViewport({ scale }); const canvas = document.createElement('canvas'); const canvasContext = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext, viewport, }; page.render(renderContext).promise.then(() => { canvas.toBlob(blob => { saveAs(blob, fileName); }, 'image/png'); }); }); }); }, }, ``` 最后,当你需要下载 base64 字符串对应的 PDF 文件时,只需调用 `downloadPDF` 函数: ```javascript this.downloadPDF('your_base64_string_here', 'your_file_name_here.pdf'); ``` 这样,你就可以将 base64 字符串转换为 PDF 文件并下载了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张张Z7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值