问答

js操作文件流

作者:admin 2021-06-29 我要评论

做一个文件导出,后台程序给我返回了一个文件流,之前都没这样操作过,js要怎么操作文件流? ### 你是 AJAX 发起的请求吗? 那就指定接收响应为 blob ,利用 URL...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

做一个文件导出,后台程序给我返回了一个文件流,之前都没这样操作过,js要怎么操作文件流?23.png

###

你是 AJAX 发起的请求吗?

那就指定接收响应为 blob,利用 URL.createObjectURL 方法转为本地链接并唤起保存。

###

先看一下有下载头吗?没有下载头的话,就用楼上的方案生成bloburl然后用download下载

###

AJAX方法

/**
* @param method 请求方式
* @param url 你的请求地址
* @param filename 文件名 // 这个根据具体需求,看你传进来还是什么方式获取
*/
function downloadFile(options) {
    var xhr = new XMLHttpRequest()
    xhr.open(options.method || 'POST', options.url, true)
    xhr.responseType = 'blob'
    xhr.send()
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = this.response
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, options.filename)
            } else {
                var a = document.createElement('a')
                var blobUrl = window.URL.createObjectURL(blob)
                a.href = blobUrl
                a.download = options.filename
                a.click()
                window.URL.revokeObjectURL(options.url)
                a = null
            }
        }
    }
}
###
const reader = res.body.getReader();

const fileArr = []; // 存放
const stream = new ReadableStream({
start(controller) {
  function push() {
    // "done"是一个布尔型,"value"是一个Unit8Array
    reader.read().then(({ done, value }) => {
      if (done) {  // 接受结束
        console.log("ok");
        const blob = new Blob(imageArr);
        const file = new FileReader();
        file.onload = function (e) {
          self.img = e.target.result;
        };
        file.readAsDataURL(blob);
        return;
      }
      fileArr.push(value);  // 因为如果文件很大一次性接受不完,就需要多次接受数据,直到完成
      push();
    });
  }
  push();
}
});

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js操作文件流

    js操作文件流

  • react组件里如何获取window对象?

    react组件里如何获取window对象?

  • 面向对象如何实现主体+可选功能的设计

    面向对象如何实现主体+可选功能的设计

  • react数组push问题,请问跟版本有关吗

    react数组push问题,请问跟版本有关吗

腾讯云代理商
海外云服务器