美文网首页
Blob文件保存

Blob文件保存

作者: 小仙有毒_1991 | 来源:发表于2020-08-21 15:11 被阅读0次

html2Canvas截图并保存

printStatistics() {
        this.exportLoading = true;
        setTimeout(() => {
        let content_html = document.getElementById(this.printId);  //要转化的div
        let width = content_html.offsetWidth;
        let height = content_html.offsetHeight;
        let canvas = document.createElement("canvas");
        let context = canvas.getContext('2d');
        let scaleBy = Math.ceil(window.devicePixelRatio);
        canvas.width = width * scaleBy;
        canvas.height = (height) * scaleBy;
        context.scale(scaleBy, scaleBy);
        let opts = {
          allowTaint: true,//允许加载跨域的图片
          taintTest: true, //检测每张图片都已经加载完成
          scale: scaleBy, // 添加的scale 参数
          canvas: canvas, //自定义 canvas
          logging: false, //日志开关,发布的时候记得改成false
          width: width, //dom 原始宽度
          height: height //dom 原始高度
        };
          this.exportLoading = false;
        html2canvas(content_html, opts).then((canvas) => {
          canvas.style.width = width + "px";
          canvas.style.height = height + "px";
            const imgUrl = canvas.toDataURL(), $a = document.createElement('a'),
              time = dateFtt('yyyy_MM_dd', new Date()),
              event = document.createEvent('MouseEvents');
            if (window.navigator.msSaveOrOpenBlob) {
              let bstr = atob(imgUrl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
              }
              let blob = new Blob([u8arr]);
              window.navigator.msSaveOrOpenBlob(blob, this.category + time + '.png')
            } else {
              $a.setAttribute('download', this.category + time + '.png');
              $a.setAttribute('target', '_blank');
              $a.setAttribute('href', imgUrl);
              event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
              $a.dispatchEvent(event);
            }
        });
        }, 800);
      },

后台返回excel数据流前端实现保存

            //excel 数据流
            let $a = document.createElement('a'), startBase, endBase;
            if (this.exportData.startTime && this.exportData.endTime) {
              startBase = new Date(this.exportData.startTime);
              endBase = new Date(this.exportData.endTime);
            } else {
              let base = new Date();

              let year = base.getFullYear(), month = base.getMonth() + 1, date = base.getDate();
              base = new Date(`${year}/${month}/${date} 00:00:00`);
              startBase = new Date(base.getTime() - 3600 * 1000 * 24 * 365);
              endBase = new Date(base.getTime());
            }
            startBase = dateFtt('yyyyMMdd', startBase);
            endBase = dateFtt('yyyyMMdd', endBase);

            res = new Blob([res.data], {type: 'application/vnd.ms-excel'});

            if (window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(res, startBase + '-' + endBase + '_日志报表.xlsx')
            } else {
              let href = URL.createObjectURL(res), event = document.createEvent('MouseEvents');
              $a.setAttribute('download', startBase + '-' + endBase + '_日志报表.xlsx');
              $a.setAttribute('target', '_blank');
              $a.setAttribute('href', href);
              event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
              $a.dispatchEvent(event);
              URL.revokeObjectURL(href);//记得释放
            }

相关文章

  • Blob文件保存

    html2Canvas截图并保存 后台返回excel数据流前端实现保存

  • create-react-app+fileSaver+Blob对

    需求 需要将文件导出保存到本地 效果 什么是Blob 参考文章如下 : 前端利用Blob对象创建指定文件并下载 M...

  • vue+axios下载后端返回的二进制流文件

    blob BLOB就是使用二进制保存数据。 数据的导出,get方式 文件的下载,post方式 疑惑:{admin:...

  • Git记录

    1、初始化 git init git中的对象类型:blob 保存文件内容commit 其中保存了一个tree对象...

  • 使用blob和URL.createObjectURL生成一个ur

    var blob = new Blob("保存为blob形式的数据"); var url = new URL.cr...

  • Oracle(一)

    Oracle数据类型 1.BLOB、CLOB、NCLOB用来保存较大的图形文件或带格式的文本文件(如文档、音频等,...

  • 解决ie下动态添加canvas兼容性问题

    解决ie下动态添加canvas兼容性问题 使用 Blob 和 msSaveBlob 以本地方式保存文件用canva...

  • 2019-07-05 schema

    chrome schema, blob 表示本地文件,而非网络文件

  • axios 请求下载文件

    response,二进制文件流下载 responseType: 'blob' 转blob创建URL对象

  • git分支

    分支简介 现在,Git 仓库中有五个对象:三个 blob 对象(保存着文件快照)、一个树对象(记录着目录结构和 b...

网友评论

      本文标题:Blob文件保存

      本文链接:https://www.haomeiwen.com/subject/fjiujktx.html