JavaScript 使用 html2canvas 保存网页为二进制文件

要使用 html2canvas 保存二进制文件，您首先需要将网页转换为 canvas，然后将 canvas 转换为二进制文件。以下是一个示例代码：

// 导入 html2canvas 库
import html2canvas from 'html2canvas';

// 获取要保存的元素
const element = document.getElementById('your-element');

// 使用 html2canvas 将元素转换为 canvas
html2canvas(element).then(canvas => {
  // 将 canvas 转换为二进制文件
  const dataURL = canvas.toDataURL('image/png');
  const binary = atob(dataURL.split(',')[1]);
  const array = [];
  for(let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  const byteArray = new Uint8Array(array);

  // 创建一个 Blob 对象
  const blob = new Blob([byteArray], { type: 'image/png' });

  // 创建一个下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'image.png';

  // 触发下载
  downloadLink.click();
});

在上面的代码中，您需要将 'your-element' 替换为要保存为二进制文件的元素的 id。代码将使用 html2canvas 将元素转换为 canvas，然后使用 toDataURL 将 canvas 转换为数据 URL。接下来，代码将数据 URL 转换为二进制数据数组，并创建一个 Blob 对象。最后，代码创建一个下载链接，并触发下载。