vue请求nginx获取文件相关问题总结

需求：

点击下载后直接下载附件，不需要预览（如pdf，txt，jpg等浏览器会默认预览该文件）。

下载的文件名称需要更改为指定名称。

 

现有：

带有协议://ip:端口/rsk/***/***.txt的nginx静态资源访问地址。

 

实现：

<el-link  @click="attachDownload(props.row.filePath, props.row.fileName)"> 下载 </el-link>

attachDownload(path, name) {
            // 0. 正则表达式去除url的ip和端口号  http和https适用
            const purl = path.replace(/^http(s|):\/\/[^/]+/, '');    // '/upload/202210/2022101909281894e43d.png'
            console.log(purl);
            const x = new window.XMLHttpRequest();
            x.open('GET', purl, true);
            x.responseType = 'blob';
            x.onload = () => {
                const url = window.URL.createObjectURL(x.response);
                const a = document.createElement('a');
                a.href = url;
                a.download = name;  // 2. 重命名文件
                a.click();
            };
            console.log(path, name);
            x.send();
        },