美文网首页
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文件保存

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