html2canvas 截图打印/下载截图

npm i html2canvas -S

<template>

  <div id="go-edit-watermark">

    需要打印的区域

    <div class="print">

      <iframe id="iframe" style="display: none"></iframe>

    </div>

    <n-button @click="onPrintT()">下载</n-button>

  </div>

</template>

<script setup lang="ts">

import html2canvas from "html2canvas";

// 跳转打印

const onPrint = () => {

  const el: any = document.getElementById("go-edit-watermark");

  console.log("🚀 ~ el", el);

  //   const el: any = $("#printArea")[0];

  const iframe = window.frames[0];

  iframe.document.close();

  html2canvas(el, {

    scale: 1,

    width: el!.offsetWidth,

    height: el!.offsetHeight,

    allowTaint: true,

    useCORS: true,

  }).then(function (canvas) {

    const context: any = canvas.getContext("2d");

    context.mozImageSmoothingEnabled = false;

    context.webkitImageSmoothingEnabled = false;

    context.msImageSmoothingEnabled = false;

    context.imageSmoothingEnabled = false;

    const src64: any = canvas.toDataURL();

    const newImg: any = document.createElement("img");

    newImg.crossOrigin = "Anonymous";

    newImg.src = src64;

    iframe.document.write('<img src="' + newImg.src + '" />');

    setTimeout(() => {

      iframe.window.print();

    });

  });

};

// 点击截图

const onPrintT = () => {

  const el: any = document.getElementById("go-edit-watermark");

  console.log("🚀 ~ el", el);

  html2canvas(el, {

    allowTaint: true, ///允许跨域图片

    useCORS: true, //是否尝试使用CORS从服务器加载图像

    width: el.offsetWidth, //为了解决安卓手机截图后出现白边的问题

    height: el.offsetHeight, //为了解决安卓手机截图后出现白边的问题

  }).then((canvas) => {

    let height = el.offsetHeight + "px";

    let width = el.offsetWidth + "px";

    //为canvas添加样式

    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

    let a = document.createElement("a"); // 生成一个a元素

    a.download = "photo"; // 设置图片名称

    a.href = url; // 将生成的URL设置为a.href属性

    // 写法1.

    let event = new MouseEvent("click"); // 创建一个单击事件

    a.dispatchEvent(event); // 触发a的单击事件

    // 写法2

    // a.click();

    // a = null;

  });

};

</script>

<style scoped>

#go-edit-watermark {

  width: 100%;

  height: 100%;

}

</style>