vue中下载文件,浏览器打开新标签方式下载

表单方式

    const params = {
      keyword: this.listSearchKey.keyword
    };

    const formEl = document.createElement('form');
    formEl.setAttribute('action', url);
    formEl.setAttribute('method', 'post');
    formEl.setAttribute('target', '_blank');
    for (let key  in params) {
      if (params[key]) {
        let inptEl = document.createElement('input');
        inptEl.setAttribute('type', 'hidden');
        inptEl.setAttribute('name', key);
        inptEl.setAttribute('value', params[key]);
        formEl.appendChild(inptEl);
      }
    }
    $(document.body).append(formEl);
    formEl.submit();
    setTimeout(function () {
      formEl.remove();
    }, 10);

blob方式

downloadFile().then(res => {
        const link = document.createElement('a');
        let blob = new Blob([res.data], {
            type: "application/octet-stream;charset=utf-8"
        });
        link.style.display = 'none';
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = '小程序二维码.jpg';
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
        this.fullscreenLoading = false;
}).catch((err) => {
    console.log(err);
})
posted @ 2025-04-09 11:01  程序员の奇妙冒险  阅读(59)  评论(0)    收藏  举报