精华内容
下载资源
问答
  • blob下载文件

    2021-03-03 11:50:00
    // 下载模板 download() { ... const blob = new Blob([res], { type: "application/vnd.ms-excel" }); // 下载文件名 const fileName = "fileName.xls"; const linkNode = document.createElement.
    // 下载模板
        download() {
          // 调用接口获取到文件
          new Promise(res => {
            const blob = new Blob([res], { type: "application/vnd.ms-excel" });
            // 下载文件名
            const fileName = "fileName.xls";
            const linkNode = document.createElement("a");
    
            linkNode.download = fileName; // a标签的download属性规定下载文件的名称
            linkNode.style.display = "none";
            linkNode.href = URL.createObjectURL(blob); // 生成一个Blob URL
            document.body.appendChild(linkNode);
            linkNode.click(); // 模拟在按钮上的一次鼠标单击
    
            URL.revokeObjectURL(linkNode.href); // 释放URL 对象
            document.body.removeChild(linkNode);
            // this.loading = false;
          });
        },

     

    展开全文
  • 利用Blob下载文件

    千次阅读 2020-01-07 20:18:47
    前端涉及到导出文件时可以使用Blob进行下载 这里是用的vue this.$store.dispatch('exportList').then((response) => { var blob = new Blob([response], {type: 'application/vnd.ms-excel'}) var ...

    前端涉及到导出文件时可以使用Blob进行下载
    这里是用的vue

    this.$store.dispatch('exportList').then((response) => {        
    var blob = new Blob([response], {type: 'application/vnd.ms-excel'})        
    var downloadElement = document.createElement('a')        
    var href = window.URL.createObjectURL(blob) // 创建下载的链接        
    downloadElement.href = href        
    document.body.appendChild(downloadElement)        
    downloadElement.click() // 点击下载        
    document.body.removeChild(downloadElement) // 下载完成移除元素  
    window.URL.revokeObjectURL(href) // 释放掉blob对象      
    }).catch(() => {
          })
    `

    请求接口时一定要用download方式

    export function exportList() {  return http.download('/order/appeal/export')}
    展开全文
  • 现在我需要实现根据Azure的上传下载,上传部分我用的是PutBlock实现的,但是下载我用的CloudBlob.DownloadToStream(),可这个怎么监控他的下载进度呢。
  • JS中的Blob 下载文件 图片资源

    千次阅读 2019-11-01 08:46:37
    在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊...在Web中,Blob类型的对象表示不可变的类似文件对象的原始数据,通俗点说,就是Blob对象是二进制数据,但它是类似文件对象的二进制数据,因此...

    在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求。Blob,Binary Large Object的缩写,代表二进制类型的大对象。Blob的概念在一些数据库中有使用到,例如,MYSQL中的BLOB类型就表示二进制数据的容器。在Web中,Blob类型的对象表示不可变的类似文件对象的原始数据,通俗点说,就是Blob对象是二进制数据,但它是类似文件对象的二进制数据,因此可以像操作File对象一样操作Blob对象,实际上,File继承自Blob。

    Blob基本用法

    创建

    可以通过Blob的构造函数创建Blob对象:
    Blob(blobParts[, options])
    参数说明:
    blobParts: 数组类型, 数组中的每一项连接起来构成Blob对象的数据,数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。
    options: 可选项,字典格式类型,可以指定如下两个属性:

    • type,默认值为"",它代表了将会被放入到blob中的数组内容的MIME类型。
    • endings, 默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: "native",表示行结束符会被更改为适合宿主操作系统文件系统的换行符; "transparent",表示会保持blob中保存的结束符不变。
      举个栗子:
        var data1 = "a";
        var data2 = "b";
        var data3 = "<div style='color:red;'>This is a blob</div>";
        var data4 = { "name": "abc" };
    
        var blob1 = new Blob([data1]);
        var blob2 = new Blob([data1, data2]);
        var blob3 = new Blob([data3]);
        var blob4 = new Blob([JSON.stringify(data4)]);
        var blob5 = new Blob([data4]);
        var blob6 = new Blob([data3, data4]);
    
        console.log(blob1);  //输出:Blob {size: 1, type: ""}
        console.log(blob2);  //输出:Blob {size: 2, type: ""}
        console.log(blob3);  //输出:Blob {size: 44, type: ""}
        console.log(blob4);  //输出:Blob {size: 14, type: ""}
        console.log(blob5);  //输出:Blob {size: 15, type: ""}
        console.log(blob6);  //输出:Blob {size: 59, type: ""}
    

    size代表Blob 对象中所包含数据的字节数。这里要注意,使用字符串和普通对象创建Blob时的不同,blob4使用通过JSON.stringify把data4对象转换成json字符串,blob5则直接使用data4创建,两个对象的size分别为14和15。blob4的size等于14很容易理解,因为JSON.stringify(data4)的结果为:"{"name":"abc"}",正好14个字节(不包含最外层的引号)。blob5的size等于15是如何计算而来的呢?实际上,当使用普通对象创建Blob对象时,相当于调用了普通对象的toString()方法得到字符串数据,然后再创建Blob对象。所以,blob5保存的数据是"[object Object]",是15个字节(不包含最外层的引号)。

    slice方法

    Blob对象有一个slice方法,返回一个新的Blob对象,包含了源Blob对象中制定范围内的数据。
    参数说明:

    start: 可选,代表 Blob 里的下标,表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。

    end: 可选,代表的是 Blob 的一个下标,这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。如果你传入了一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。

    contentType: 可选,给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
    举个栗子:

        var data = "abcdef";
        var blob1 = new Blob([data]);
        var blob2 = blob1.slice(0,3);
        
        console.log(blob1);  //输出:Blob {size: 6, type: ""}
        console.log(blob2);  //输出:Blob {size: 3, type: ""}
    

    通过slice方法,从blob1中创建出一个新的blob对象,size等于3。

    Blob对象能够添加到表单中,作为上传数据使用:

    const content = '<a id="a"><b id="b">hey!</b></a>';
    const blob = new Blob([content], {type: 'text/xml'});
    
    formData.append('webmasterfile', blob);
    

    Blob使用场景

    分片上传

    前面已经说过,File继承字Blob,因此我们可以调用slice方法对大文件进行分片上传。代码:

    function uploadFile(file) {
      var chunkSize = 1024 * 1024; //每片1M大小
      var totalSize = file.size;
      var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片总数
      var offset = 0; //偏移量
    
      var reader = new FileReader();
      reader.onload = function(e) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url);
        xhr.overrideMineType("application/octet-stream");
        
        xhr.onreadstatechange = function() {
          if(xhr.readyState === 4 && xhr.status ===200) {
            ++offset;
            if(offset === chunkQuantity) {
              alerrt("上传完成");
            } else if(offset === chunckQuantity-1) {
              blob = file.slice(offset*chunkSize, totalSize);
              reader.readAsBinaryString(blob);
            } else {
              blob = file.slice(offset*chunkSize, (offset+1)*chunckSize);
              reader.readAsBinaryString(blob);
            }
          }else {
            alert("上传出错");
          }
        }
    
        if(xhr.sendAsBinary) {
          xhr.sendAsBinary(e.target.result);
        } else {
          xhr.send(e.target.result);
        }
      }
      var blob = file.slice(0, chunkSize);
      reader.readAsBinaryString(blob);
    }
    

    这段代码还可以进一步丰富,比如显示当前上传进度,使用多个XMLHttpRequest对象并行上传对象(需要传递分片数据得位置参数给服务器端)等。

    Blob URL

    Blob URL是blob协议得URL,它的格式如下:
    blob:http://xxx
    Blob URL可以通过URL.createObjectURL(blob)创建。在绝大部分场景下,我们可以像使用Http协议得URL一样使用Blob URL。常见得场景有: 作为文件得下载地址和作为图片资源地址。

    • 文件下载地址
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
       <meta charset="UTF-8">
       <title>Blob Test</title.
      <script>  
        function createDownloadFile() {
          var content = "Blob Data";
          var blob = new Blob([content]);
          var link = document.getElementByTageName('a')[0];
          link.download = "file";
          link.href = URL.createObjectURL(blob);
        }
        window.onload = createDownloadFile;
      </script>
    </head>
    
    <body>
      <a>下载</a>
    </body>
    
    </html>
    

    点击下载按钮,浏览器将会下载一个名为file得文件,文件得内容是:Blob Data。通过Blob对象,我们在前端代码中就可以动态生成文件,提供 给浏览器下载。打开Chrome浏览器调试窗口,在Elements标签下可以看到生成得Blob URL:
    [图片上传失败...(image-130a5a-1551669191720)]

    • 图片资源地址
      为图片文件创建一个Blob URL,赋值给标签:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Blob Test</title>
      <script>
        function handleFile(e) {
          var file = e.files[0];
          var blob = URL.createObjectURL(file);
          var img = document.getElementByTagName("img")[0];
          img.src = blob;
          img.onload = function(e) {
            URL.revokeObjectURL(this.src); //释放createObjectURL创建得对象
          }
        }
      </script>
    </head>
    
    <body>
      <input type="flie" accept="image/*" onchange="handleFile(this)" />
      <br/>
      <img style="width:200px;height:200px;">
    </body>
    
    </html>
    

    imput中选择得图片会在这里显示出来:
    [图片上传失败...(image-c20d1f-1551669191720)]
    同时,可以在Network标签栏,发现这个Blob URL得请求信息:
    [图片上传失败...(image-fa2288-1551669191720)]
    这个请求信息和我们平常使用Http URL获取得图片几乎完全一样。

    window.URL.revokeObjectURL()

    在每次调用createObjectURL()方法时,都会创建一个新的URL对象,即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时,每个对象必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出时自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
    window.URL.revokeObjectURL(objectURL);

    • 我们还可以使用Data URL加载图片资源:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Blob Test</title>
      <script>
        function handleFile(e) {
          var file = e.files[0];
          var fileReader = new FileReader();
          var img = document.getElementByTagName("img")[0];
          fileReader.onload = function(e) {
            img.src = e.target.result;
          }
          fileReader.readAsDataURL(file);
        }
      </script>
    </head>
     
    <body> 
      <input type="file" accept="image/*" onchange="handleFile(this)" />
      </br>
      <img style="width:200px;height:200px;">
    </body>
      
    </html>
    

    Data URL对大家来说并不陌生,Web性能优化有一项措施:把小图片用base64编码直接嵌入到HTML文件中,实际就是利用了Data URL来获取图片数据。


    那么Blob URL和Data URL有什么区别呢?

    1. Blob URL得长度一般比较短,但Data URL因为直接存储图片base64编码后得数据,往往很长。当显示大图片时,使用Blob URL更优。
    2. Blob URL可以方便的使用XMLHttpRequest获取源数据,例如:
    var blobUrl = URL.createObkectURL(new Blob(['Test'], {type: 'text/plain'}));
    var xhr = new XMLHttpRequest();
    //如果是指xhr.responseType = 'blob',将返回一个Blob对象,而不是文本;
    //xhr.responseType = 'blob';
    xhr.onload = function() {
      alert(xhr.responseText);
    }
    xhr.open('get', blobUrl);
    xhr.send();
    

    对于Data URL, 并不是所有浏览器都支持通过XMLHttpRequest获取源数据的。

    1. Blob URL只能在当前应用内部使用,把Blob URL复制到浏览器的地址栏中,是无法获取数据的。Data URL相比之下,就有很好的移植性,你可以在任意浏览器使用。

    除了可以用作图片资源的网络地址,Blob URL也可以用作其他资源的网络地址,例如html文件、json文件等,为了保证浏览器能正确的解析Blob URL返回的文件类型,需要在创建Blob对象时指定相应的type:

    //创建HTML文件的Blob URL
    var data = "<div style='color:red;'This is a blob</div>";
    var blob = new Blob([data], {type: 'text/html'}); // 'application/json'
    var blobUrl = URL.createObjectURL(blob);
    


    原文链接:https://www.jianshu.com/p/b322c2d5d778

    展开全文
  • vue中使用blob 下载 文件

    千次阅读 2019-09-19 20:13:17
    最近遇到下载文件, 以前做的直接就是a链接 下载, 这次是调接口,后台返回一段数据流,后来用到blob 1, 用到的get方法, 但是注意, 要告诉 需要什么格式的, 不然就会下载为 乱码. (如果是post, 就封装一个post方法就好...

    最近遇到下载文件,  以前做的直接就是a链接 下载, 这次是调接口,后台返回一段数据流,后来用到blob

    1, 用到的get方法, 但是注意, 要告诉 需要什么格式的, 不然就会下载为 乱码. (如果是post, 就封装一个post方法就好了, 同理)

    // 请求方法封装 - blob下载
    const getblob =  function fetchDownLoad (url) {
        return new Promise((resolve, reject) => {
        instance.get(url, {responseType: 'blob'}).then(response => {
            resolve(response)
          }, err => {
            reject(err)
          }).catch((err) => {
            reject(err)
          })
        })
      }

    !!!!注意:  {responseType: 'blob'}  这个必须写哦. 不然会乱码

    2, 在请求成功后, 拿到 数据流, 前端进行处理.

    // 导出
        Outrule() {
          this.$http.getblob(api.modelOut).then(res => {
            const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
            let url = window.URL.createObjectURL(blob);
            window.location.href = url
          })
        },

    !!!注意: {type: 'application/vnd.ms-excel'}  ,这个也是要写哦,  这个就是你需要转换成什么格式的, 也就是 下载的文件本身是什么格式的.  (这里是application type的对照表)

    ================================================================================================

    我这样写是没有进行 文件处理的, 就是下载的不是文件本身的名字, 如果要下载为文件本身的名字, 需要进行处理一下.

    思路: 去获取 响应头里面的信息, 然后拼接出来一个名字, 动态创建a标签, 设置 download 属性为 文件名字, 设置a标签的 href 属性 为 Blob

    上一段代码, 供参考

    // 文件流下载
    const BlobDownload = function (contentName, data, type) {
      const blobFile = data
      const blob = new Blob([blobFile], {type: type})
      const fileName = contentName.substring(contentName.lastIndexOf('=') + 1, contentName.length)
      const link = document.createElement('a')
      link.download = fileName
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.click()
      URL.revokeObjectURL(link.href)
      document.body.removeChild(link)
    }

    遇上文件名为中文的时候, 下载下来为乱码的问题: 

    解决:   fileName = decodeURIComponent(fileName); 

     

    补充: 2019-11-13, 万恶的ie是不支持以上动态创建a标签的 方法的

    先判断是否为ie浏览器,ie要使用 window.navigator.msSaveOrOpenBlob(blob, fileName); 修改如下: 

    // 文件流下载
    const BlobDownload = function (contentName, data, type) {
      const blobFile = data
      const blob = new Blob([blobFile], { type: type })
      let fileName = contentName.substring(contentName.lastIndexOf('=') + 1, contentName.length)
      fileName = decodeURIComponent(fileName); // 中文乱码转换
      if (IEVersion() === -1) { // 判断浏览器是否为ie
        const link = document.createElement('a')
        link.download = fileName
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      } else {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      }
    }

    判断浏览器是否为ie见另一篇文章

    展开全文
  • 前端使用blob下载文件

    2021-03-17 17:03:39
    接口 export const areaStatisticsExport = (params = {}) => { return request({ url: prefix + '/cmis-report/statistics/... responseType: 'blob' }) }; js部分 areaStatisticsExport(trimForm(thi
  • 用vue作为前端、node.js作为后端开发一个网站,有一个需求是在前端进行文件下载文件类型包括pdf、word、exe等,文件的储存位置在后端的路径中。 后端代码: ``` res.download(file_path) ``` 前端代码: ...
  • vue(二) vue中使用blob下载文件

    万次阅读 2019-08-02 13:36:39
    1.post请求上传后对后端解析文件,然后下载 uploadSectionFile(param) { const self = this; //formData 为upload必须对象,默认接收的对象值 //eslint-disable-next-line const formData = new FormData(); ...
  • // 如果使用了axios的拦截器 axios.interceptors.response.use((response) => { ... }, error =>... error.response.request.responseType == 'blob' ) { let reader = new FileReader() .
  • return request({ url: '*****', method: 'post', responseType: 'blob', data: data })
  • Blob 下载文件时 type 类型 大全

    千次阅读 2021-04-29 10:17:29
    aac AAC audio audio/aac .abw AbiWorddocument application/x-abiword .arc Archive document (multiple files embedded) application/x-freearc .avi AVI: Audio Video Interleave ...
  • head> <body> ()">下载button> <script> let downloadBlob = (blob, fileName) => { try { const href = window.URL.createObjectURL(blob); //创建下载的链接 if (window.navigator.msSaveBlob) { window.navigator...
  • 第1步是处理后端返回的文档流数据(注意:请求PDF文档流数据的接口时如果是axios封装的post请求:params,{responseType:'blob'},如果是axios封装的get请求:{params:params,responseType:'blob'}): // // ...
  • 一、excel文件上传 1、html代码: <el-button size="mini" :plain="true" class="file-box" type="button"> 导入 <input id="up" ref="file" type="file" class="file-btn" @change="inputCustomProd...
  • 刚开始查了网上说需要设置responseType='blob',但是代码中已经这么设置了下载还是乱码, 就想到这个设置是不是没起作用呢? 然后面向百度后发现mock模块会导致上面的设置失效,这是前期同时做相应模块的时候引入...
  • 前后端分离项目一般是通过输入输出流来进行文件传输的,也就是利用文件流来实现端到端的文件下载功能。 因为有的文件可能含有中文,因此在文件传输过程中会涉及到编码问题。后台的代码需要将输出流的编码格式设置为...
  • vue 通过blob下载文件

    千次阅读 2020-07-22 11:30:27
    在web端的管理系统中常会用到的功能就是下载文件(包含excel、word、txt等),...1、下载blob文件需要知道文件对应格式的type,所以要明确下载文件格式(以word、excel、txt为例) 文件后缀 blob对应的type .doc
  • blob文件下载

    2020-10-22 10:05:55
    // file是要下载文件blob对象) downloadHandler: function (file, fileName) { let link = document.createElement('a') link.href = window.URL.createObjectURL(file) link.download = fileName link....
  • 主要为大家详细介绍了Vue利用Blob下载原生二进制数组文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 项目中经常遇到文件下载需求,有时候后台返回的是一个blob文件(就是看起来像是乱码的数据),这时就需要前端对文件进行处理,或展示,或下载。故这里简单实现一下blob文件下载的方法。 function downloadFile()...
  • vue+blob文件流转word文档并实现下载功能,解决vue中document.createElement(‘a’)报错is not a function vue中一般来说是不建议操作dom的,但要用blob实现文件下载的话,网上全是需要对dom进行操作的,复制粘贴...
  • 前端通过Blob实现文件下载

    千次阅读 2019-09-02 18:13:45
    其实并不需要这么麻烦,这样既增大了服务器的负载,也让用户产生了没有必要的网络请求,现在前端也是可以直接通过Blob对象进行前端文件下载了,下面简单记录下相关实现 Blob对象简要介绍 Blob 对象表示一个不可变、...
  • Vue 下载 blob文件

    2021-03-02 10:58:33
    Vue 下载 blob文件 // 下载文件 showFile(item) { this.$http({ method: 'post', url: '/fileApi/downLoadFile', responseType: 'blob', data: { 'flieName': item.fileName }, }).then
  • blob文件下载说明

    2019-12-17 13:20:06
    blob文件下载代码 // responseType: "blob" // .then(res => { // console.log(res); // let temp = res.headers["content-disposition"] // .split(";")[1] // .split("filename=")[1]; // console.log(temp); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 182,413
精华内容 72,965
关键字:

blob下载文件