【vue】js下载public静态文件

最新推荐文章于 2024-07-30 10:56:44 发布

不懂装懂的不懂

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.2k

点赞数 8

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_65041204/article/details/136341155

版权

本文介绍了如何在Vue项目中，通过XMLHttpRequest实现前端从public文件夹下载静态资源文件，包括展示文件路径，提供了一个下载Excel模板的示例代码，并分享了在vue-cli4中避免常见下载问题的技巧。

摘要由CSDN通过智能技术生成

一、需求说明

public文件夹下的静态资源文件下载，前端处理

二、文件路径展示

三、解决方法

代码如下：

<span @click="downloadFile('/需要下载的模板文件.xlsx','模板.xlsx')">点击下载</span>
 

 
// 下载
downloadFile (url,fileName) {   
    const x = new XMLHttpRequest();
    x.open("GET", url, true);
    x.responseType = "blob";
    x.onload = function () {
        const url = window.URL.createObjectURL(x.response);
        const elink = document.createElement("a");
        elink.href = url;
        elink.target = "_self"; // 当前也 target打开新页面
        elink.setAttribute("download", fileName);
        elink.style.display = "none";
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
    };
    x.send();
},