html 导出为 image

第一种方法

const base64ToBlob = (content: any) => {
    let parts = content.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);
    for(let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
  }

const downloadFile = (filename: string, content: any) => {
    let link = document.createElement('a');
    let blob = base64ToBlob(content);
    link.download = filename;
    link.href = URL.createObjectURL(blob);
    link.click();
  }

  const saveAsCanvas = () => {
    html2canvas(document.body).then(function(canvas) {
      let img = canvas.toDataURL('image/jpeg');
      let filename = `Image${new Date().getTime()}.jpeg`;
      downloadFile(filename, img);
    });
  }

第二种方法

// 需要引入一个插件
import domtoimage from 'dom-to-image';

const saveAsImage = () => {
    let node = document.body;
    domtoimage.toJpeg(node, { quality: 1.0 }).then(dataUrl => {
      let link = document.createElement('a');
      link.download = 'test99.jpeg';
      link.href = dataUrl;
      link.click();
    });
  }