js脚本下载文件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34596292/article/details/93020225

博客介绍了纯JS导出数据的方法，针对请求接口返回二进制流数据导出下载文件的情况，可引入axios第三方库，通过传参、调接口来实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯js导出数据：


function fakeClick(obj) { 
       　　var ev = document.createEvent("MouseEvents");
　　　　ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
　　　　obj.dispatchEvent(ev);
　　}

function exportRaw(name, data) {
　　　　var urlObject = window.URL || window.webkitURL || window;
　　　　var export_blob = new Blob([data]);
　　　　var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
　　　　save_link.href = urlObject.createObjectURL(export_blob);
　　　　save_link.download = name;
　　　　fakeClick(save_link);
　　}

var content = '导出的数据或文本内容';

exportRaw('cy.txt', content);

请求接口返回二进制流数据导出下载文件js处理：
引入axios第三方库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

传参、调接口，下载文件

axios.post(请求路径URL, {参数Params}, {
            responseType: 'blob'
          }).then(function(res){
            var blob = res.data;
           // FileReader主要用于将文件内容读入内存
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            // onload当读取操作成功完成时调用
            reader.onload = function(e) {
              var a = document.createElement('a');
              // 获取文件名fileName
              var fileName = res.headers["content-disposition"].split("=");
              fileName = fileName[fileName.length - 1];
              fileName = fileName.replace(/"/g, "");
              a.download = fileName;
              a.href = e.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            }
          });