vue项目中下载文档的一种方式

1,使用axios请求下载文档(word或其他文档),由于在请求中使用的了talents_token进行了封装,所以需要在请求中的headers中添加talent_token字段,如下面所示,点击下载,会下载一个word文档。
2,我们代码中弃用的方式如下:直接使用的window.location.href 进行的下载。

window.location.href = `${window.mainConfig.baseUrl}/pub/iface/downloadResume?id=${id}`
               

目前正在使用的下载方式
vue项目中下载文档的一种方式_第1张图片

doDownloadResume(id,name){
                axios({
                    method: 'get',//请求方式
                    headers: {
                        'talents_token': window.localStorage.getItem('talents_token'),
                    },
                    url: `${window.mainConfig.baseUrl}/pub/iface/downloadResume?id=${id}`,//请求路径
                    responseType: 'blob'
                }).then(res => {
                    const blob = new Blob([res.data], {
                    type: 'application/msword',
                    });
                    const objectUrl = URL.createObjectURL(blob);
                    const link = document.createElement('a');//我们用模拟q标签点击事件
                    const fname = name + '的简历'; //下载文件的名字
                    link.href = objectUrl;
                    link.setAttribute('download', fname);
                    document.body.appendChild(link);
                    /**
                    * 在这期间,我们可以做自己界面的反应逻辑
                    **/
                    link.click();//点击
                    document.body.removeChild(link); // 下载完成移除元素
                    window.URL.revokeObjectURL(URL); // 释放掉blob对象
                })
            },

你可能感兴趣的:(下载,javascript,vue.js,下载)