vue js中的文件下载功能

qyzbxkaa 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(188)

我是新开发人员，第一次尝试此功能。我正在尝试下载来自服务器的文件，格式如下：

%PDF-1.2
%����
3 0 obj
<< 
/Linearized 1 
/O 5 
/H [ 760 157 ] 
/L 3908 
/E 3658 
/N 1 
/T 3731 
>> 
endobj
                                                                xref
3 15 
0000000016 00000 n
0000000644 00000 n
0000000917 00000 n
0000001068 00000 n
0000001224 00000 n
0000001410 00000 n
0000001589 00000 n
0000001768 00000 n
0000002197 00000 n
0000002383 00000 n
0000002769 00000 n
0000003172 00000 n
0000003351 00000 n
0000000760 00000 n
0000000897 00000 n
trailer
<<
/Size 18
/Info 1 0 R 
/Root 4 0 R 
/Prev 3722 
/ID[<d70f46c5ba4fe8bd49a9dd0599b0b151><d70f46c5ba4fe8bd49a9dd0599b0b151>]
>>
startxref
0
%EOF
      
4 0 obj
<< 
/Type /Catalog 
/Pages 2 0 R 
/OpenAction [ 5 0 R /XYZ null null null ] 
/PageMode /UseNone 
>> 
endobj
16 0 obj
<< /S 36 /Filter /FlateDecode /Length 17 0 R >> 
stream
H�b``�e``��

'现在在UI中我已经这样做了

downloadFile () {
  api.get(`ips/downloadAttachedFile/` + this.claimId, { responseType: 'Blob' }).then( res => {
    const downloadUrl = window.URL.createObjectURL(new Blob([res]),{ type: "application/pdf" });
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.setAttribute('download', 'test.pdf');
    document.body.appendChild(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(link.href)
  })
}

当我试图下载它，pdf是来作为空白文件。
我想在该pdf文件中的数据显示，如果我有更多的文件类型，如.jpg，.doc等，所以我怎么能下载他们与他们的扩展名。有人能帮助我吗

vue.js

来源：https://stackoverflow.com/questions/74298973/file-download-functionality-in-vue-js

2条答案

按热度按时间

lnxxn5zx1#

您可以尝试使用FileSaver--工作起来像个符咒：

import saveAs from '@/lib/FileSaver.js';
import Axios from 'axios';

Axios.get(`ips/downloadAttachedFile/` + this.claimId, {
  responseType: 'blob',
}).then(response =>
{
  saveAs(new Blob([response.data], { type: 'application/octet-stream' }), response.filename, { autoBOM: false });
});

赞(0）回复(0）举报 2022-11-17

lrl1mhuk2#

你可以在点击按钮后尝试超时。对我很有效。

const download = (data, name, type) => {
  const url = window.URL.createObjectURL(new Blob([data], { type }));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', name);
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  }, 200);
};

适用于您的情况

downloadFile () {
  api.get(`ips/downloadAttachedFile/${this.claimId}`, { 
    responseType: 'Blob' 
  }).then(res => {
    download(res, 'test.pdf', 'application/pdf')
  })
}

赞(0）回复(0）举报 2022-11-17

我来回答

vue js中的文件下载功能

2条答案

相关问题

热门标签

最新问答