下載docx or zip

let api = 'http://172.16.133.206:3000/api/crisps-elec-mid/yk/elec/mid/template/download_template.do?templateIdList=1379369742456244186';

fetch(api, {
  // headers添加驗簽衫樊；驗簽功能取決于接口否有驗簽要求，一般只驗證token利花；
  // 若只驗證token科侈，只需要在請求攔截器統(tǒng)一設(shè)置
  headers: {                                   
    // sign: "4D511B5974D175C1754BFCCABC2803B8", // 驗簽
    // sysCode: "crisps-contract", // 服務(wù)名
    "X-Auth-Token": JSON.parse(sessionStorage.getItem("token"))
  }
}).then(r=>r.blob())
    .then(res=>{  // r就是從后端獲取到的文件流
       const href = URL.createObjectURL(res);
       Object.assign(document.createElement('a'), {
        href,
        download: tempArr.length === 1 ? '合同模板.docx' : '合同模板.zip',
       }).click();
       URL.revokeObjectURL(href);
    }
)

打印

• 沒有用window.print()方式(打印的是頁面可見的元素);
• 使用iframe方式，打開一個新窗口炒事，將后端返回的圖片寫入到窗口中進(jìn)行打印(后端返回的圖片)

print_contract({ fileId: this.id }).then((data) => {    // 后端返回得是base64位的圖片數(shù)組
          const iframe = document.createElement('iframe');

          iframe.onload = function () {
            iframe.contentWindow.document.write(
              data
                .map((item) => {
                  return `<img src="${item}" />`;
                })
                .join(''),
            );
            setTimeout(() => {
              iframe.contentWindow.print();    // 直接打印會空白臀栈，利用一點間隙時間
            }, 100);
          };
          iframe.hidden = true;
          document.body.appendChild(iframe);
        }).catch((err) => { });

利用a標(biāo)簽下載image, excel, pdf等

function downLoad(data){
  try {
    let blobObj = await fetch(data.filePath).then((fileStreat) => fileStreat.blob());  // 后端返回二進(jìn)制文件流
    let blobUrl = window.URL.createObjectURL(blobObj);
  
    const a = document.createElement("a");
    a.download = data.fileName || (new Date().getTime() + '.pdf');
    a.href = blobUrl;
    a.click();
    URL.revokeObjectURL(blobUrl);
  } catch (err) {
    console.log("err:", err);
  }
}

利用canvase重繪圖片

async function canvasDrawImg(item){
    let blob = await new Promise((resolve,reject)=>{
        let img = new Image();
        img.src = item.filepath;
        // img.crossOrigin = 'anonymous';
        console.log(2222)
        img.onload = ()=>{
          console.log(3333)
          const cvs = document.createElement("canvas");
          cvs.width = img.width;
          cvs.height = img.height;
          const ctx = cvs.getContext("2d");
          ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
          document.body.removeChild(img);

          cvs.toBlob(resolve, "image/png");
        }
        img.onerror = reject
        document.body.appendChild(img);
      });
      
      let blobUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.download = item.filename;
      a.href = blobUrl;
      a.click();
      URL.revokeObjectURL(blobUrl);
}