vue3 html2canvas 网络图片空白及使用

最新推荐文章于 2024-10-24 18:38:10 发布

原创最新推荐文章于 2024-10-24 18:38:10 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

vue 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何使用html2canvas库在JavaScript中获取指定div的内容并转换为base64格式图片，支持跨域和不同浏览器的兼容性处理，包括PDF下载和直接下载功能。

/* <div id="capture" ref="divDom">
      <img :src="img">
    </div> */
import html2canvas from 'html2canvas'
const img = ref("https://tse1-mm.cn.bing.net/th/id/OIP-C.cykW2JFIAZEv6vWFflfjygHaEZ?pid=ImgDet&rs=1")
const base64img = ref()
const weeklyReport = () => {
  console.log('生成周报')
  html2canvas(document.querySelector('#capture'), {
    backgroundColor: "#ffffff",
    allowTaint: true,  //开启跨域
    useCORS: true,
    scrollY: 0,
    scrollX: 0,
  }).then((canvas) => {
    // 转换成base64格式，这个格式可以挂载到img里，也可以下载下来，也可以打压缩包下载下来
    const base64 = canvas
      .toDataURL()
      .replace(/^data:image\/(png|jpg);base64,/, '')
    base64img.value = `data:image/png;base64,${base64}`
    console.log(base64img.value)

    // if (window.navigator.msSaveOrOpenBlob) {

    //   let bstr = atob(base64img.value.split(",")[1]);
    //   let n = bstr.length;
    //   let u8arr = new Uint8Array(n);
    //   while (n--) {
    //     u8arr[n] = bstr.charCodeAt(n);
    //   }
    //   let blob = new Blob([u8arr]);
    //   window.navigator.msSaveOrOpenBlob(blob, "周报" + "." + "pdf");
    // } else {
    //   // 这里就按照chrome等新版浏览器来处理
    //   let a = document.createElement("a");
    //   a.href = base64img.value;
    //   a.setAttribute("download", "周报");
    //   a.click();
    // }
  });
}