js动态请求后台下载文件

<button type="button" οnclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口
  xhr.responseType = "blob";    // 返回类型blob
  // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
      // 返回200
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a标签href
      reader.onload = function (e) {
        // 转换完成,创建一个a标签用于下载
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);    // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端使用Vue发送请求下载PDF文件需要用到两个技术:axios和Blob。 首先,在Vue项目中安装axios: ``` npm install axios --save ``` 然后,在Vue组件中使用axios发送请求下载PDF文件: ```javascript import axios from 'axios' export default { methods: { downloadPDF() { axios({ url: 'your-backend-api', method: 'GET', responseType: 'blob' // 返回类型为blob }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'file.pdf') // 下载文件名 document.body.appendChild(link) link.click() }) } } } ``` 在代码中,我们设置了axios的请求类型为'GET',返回类型为'blob'。当请求成功时,我们将response.data转换为Blob类型,创建URL并生成一个a标签用于下载。将a标签添加到body中,模拟用户点击下载。最后,我们需要注意设置下载文件文件名。 在后端,你需要设置响应头的Content-Type为'application/pdf',推荐使用node.js的mime模块来获取正确的Content-Type: ```javascript const fs = require('fs') const path = require('path') const mime = require('mime') app.get('/download', (req, res) => { const filePath = path.join(__dirname, 'file.pdf') const fileStream = fs.createReadStream(filePath) const contentType = mime.getType(filePath) res.setHeader('Content-Type', contentType) res.setHeader('Content-Disposition', 'attachment; filename=file.pdf') fileStream.pipe(res) }) ``` 在代码中,我们使用fs模块读取文件流,使用mime模块获取正确的Content-Type并设置响应头。最后,将文件流通过管道pipe到响应中,完成下载

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值