记录：页面下载为png和pdf

记录贴，要下载为png和pdf的页面比较简单，只有文字，所以没遇到什么坑

下载为png

使用html2canvas
官网：https://html2canvas.hertzen.com/

npm i html2canvas

 import html2canvas from 'html2canvas';
 
 async function saveAsImage() {
    try {
      const bodyEl: HTMLElement = document.querySelector(
        '.body',
      ) as HTMLElement;

      const canvas = await html2canvas(bodyEl, {
        useCORS: true,
        scale: 2, // 提高渲染质量
      });
      fetch(canvas.toDataURL('image/png'))
        .then((response) => response.blob())
        .then((blob) => {
          // 创建一个 Blob URL
          const url = window.URL.createObjectURL(new Blob([blob]));
          // 创建一个隐藏的可下载链接
          const a = document.createElement('a');
          a.href = url;
          a.download = 'test.png';
          // 触发点击
          a.click();
          // 清理 URL
          setTimeout(() => {
            window.URL.revokeObjectURL(url);
            a.remove();
          }, 100); // 等待下载完成
        })
        .catch(console.error);
    } catch (error) {
      console.error('Error capturing the page:', error);
    }
  }

下载为pdf

使用html2pdf
文档：https://github.com/eKoopmans/html2pdf.js#options

npm install --save html2pdf.js

 import html2pdf from 'html2pdf.js';
 function savePdf() {
    const bodyEl: HTMLElement = document.querySelector(
      '.body',
    ) as HTMLElement;
    html2pdf()
      .set({
        pagebreak: { mode: ['avoid-all'] },
        html2canvas: {
          scale: 2,
          useCORS: true,
        },
      })
      .from(bodyEl)
      .save('test.pdf')
  }