Blob文件保存

2020-08-21  本文已影响0人  小仙有毒_1991

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);//记得释放
            }
上一篇下一篇

猜你喜欢

热点阅读