文件下载预览导出

        /***
         *
            Blob对象表示一个不可变,原始数据的类文件对象,如果要从其他非Blob对象和结构构建一个Blob,需要使用Blob()构造函数,
            如果要获取一个blob数据的子集blob需要使用Blob.slice()方法
            1. 构造函数
            Blob(blobParts[, options])  返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
            2. 属性
            Blob.size =>    Blob对象中所包含数据的大小(字节)
            Blob.type =>    一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。
            3. 方法
            Blob.slice([start[, end[, contentType]]]) =>    Blob.slice([start[, end[, contentType]]])

            作用:
            1. 可以获取某个文件内容或后台返回的文件(需要设置响应类型为Blob),再通过createObjectURL方法,变成一个文件地址,实现本地文件预览
            2. 前端下载后台返回的文件时,文件为文件流或者二进制时,可以使用Blob方法,变成一个文件地址,然后进行下载功能(需要设置响应类型为Blob)。
                - 使用时第二个参数的文件类型要指定

            FileReader
            FileReader对象允许Web应用程序异步读取存储在计算机上文件的内容,使用file或Blob对象指定要读取的文件或数据
            1. 构造函数
            new FileReader();
            2. 属性
            FileReader.error  当一个文件读取错误时
            FileReader.readState
                0 还没有加载数据
                1 正在加载数据
                2 完成加载数据
            FileReader.result  当文件完全读取完成后
            3. 事件
            FileReader.onabort  在读取时中断的时候触发
            FileReader.error  在发生错误时
            FileReader.onload   在读取完成后
            FileReader.onloadstart  在刚开始读取的时候
            FileReader.onloadend   在读取结束时(要么成功要么失败)
            FileReader.onprogress  在读取的过程中
            4. 方法
            FileReader.readAsDataUrl() 开始读取指定Blob中的内容,一旦完成,result属性中包含一个data:URL格式的Base64字符串来表示所读取的文件内容
            FileReader.readAsBinaryString() 开始读取指定Blob中的内容,一旦完成,result属性中将包含所读取文件的原始二进制数据。
            FileReader.readAsText() 开始读取指定Blob中的内容,一旦完成,result属性中将包含一个字符串来表示所读文件的内容
            FileReader.abort() 中止读取操作,在返回时readState属性为2
            FileReader.readAsArrayBuffer() 开始读取指定的Blob文件,一旦完成,result属性中保存的将是读取文件的ArrayBuffer数据对象
            作用:实现文件下载
        */
        let debug = {
            hello: "world"
        };
        let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});
        console.log(blob);
        //var typedArray = GetTheTypedArraySomehow();
        // let blob = new Blob([debug.hello], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
        // let url = URL.createObjectURL(blob);
        // console.log(url)

        /*Blob作用1【实现文件预览(本地文件后台返的文件)】*/
        /**
         // 本地
        const blob = new Blob([file.file], {type: 'application/pdf'});
        this.signFileUrl = URL.createObjectURL(blob); // 将生成的地址赋值给src的属性
        // 后台请求ajax 需要设置响应类型为Blob,{responseType: "blob"}

        */

        /*Blob作用2【ajax后下载({responseType: "blob"})】*/
       
         function  downloadFile() {
            const blob = new Blob([result]);
            const fileName = '文件名称.xlsx';
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
       
        /*FileReader【实现下载({responseType: "blob"})】*/
      
         xhr.onload = function (result) {
            if (this.status === 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 = templateName + '.xlsx';//xls
                 console.log(e);
                 a.href = e.target.result;
                 $("body").append(a);
                 a.click(); // 修复firefox中无法触发click
                 $(a).remove();
                }
            }
         };

  
        /*根据后台返回的文件地址,进行下载文件,有时候在浏览器上本想下载却成了文件预览*/
        
        function downloadPdf() {
            let request = new XMLHttpRequest();
            request.responseType = 'blob';
            request.open('GET', this.signFileUrl);
            request.onload = function() {
                let url = window.URL.createObjectURL(this.response);
                let a = document.createElement('a');
                document.body.appendChild(a);
                a.href = url;
                a.download = '签名文件.pdf';
                a.click();
            }
            request.send();
        }

if (result) {
  const blob = new Blob([content]);
  const fileName = '文件名称';
  if ('download' in document.createElement('a')) {
    // 非IE下载
    const elink = document.createElement('a');
    elink.download = fileName;
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName);
  }
} else {
  that.$message.error(result.data.message);
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值