vue3 html2canvas 将view/div导出为一张图片，解决背景图片不显示的问题。

花花鱼

于 2024-10-07 19:21:14 发布

阅读量254

点赞数 1

分类专栏： Vue3 文章标签： vue.js

本文链接：https://blog.csdn.net/jwbabc/article/details/142744712

版权

Vue3 专栏收录该内容

92 篇文章 0 订阅

订阅专栏

1、安装：

pnpm add html2canvas

2、导入及定义：

import html2canvas from 'html2canvas';
const viewRef = ref(null);

<div ref="viewRef">
    内容全在这里面

</div>

3、导出：

(async () => {
      try {
        const canvas = await html2canvas(viewRef.value, { useCORS: true });
        const img = canvas.toDataURL('image/png');

        const link = document.createElement('a');
        link.href = img;
        link.download = 'view.png';
        link.click();
      } catch (error) {
        console.error('Error capturing view as image:', error);
      }
    })();

然后上面的代码，导出的图片，没有背景图。

4、解决没有背景图的设置：

(async () => {
      try {
        const canvas = await html2canvas(viewRef.value, { useCORS: true });
        const img = canvas.toDataURL('image/png');

        const link = document.createElement('a');
        link.href = img;
        link.download = 'view.png';
        link.click();
      } catch (error) {
        console.error('Error capturing view as image:', error);
      }
    })();

这样就成功了。