Vue 插件 html2canvas 将页面内容生成图片

最新推荐文章于 2025-07-09 16:51:18 发布

_格鲁特宝宝

最新推荐文章于 2025-07-09 16:51:18 发布

阅读量3.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue Web FrontEnd 文章标签： Vue 插件 html2canvas 插件 html2canvas Vue 将页面生成图片 html2canvas生成图片

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/114669018

本文介绍了如何在Vue项目中使用html2canvas插件将页面内容转换为图片，包括安装、引入和具体用法。同时，文章详细讨论了在使用过程中可能遇到的问题，如canvas宽高设置、跨域、背景颜色、绘制偏移和截图不全等，并给出了相应的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：http://html2canvas.hertzen.com/

* 使用

1、安装：

npm install --save html2canvas

2、引入：

import html2canvas from "html2canvas"

3、将特定内容转成图片

　　特定内容包裹的 div 添加 ref 属性标记

<div class="container" ref="imageDom"></div>

/**
* 将页面指定节点内容转为图片 
*/
generatePicture() {
  html2canvas(this.$refs.imageDom).then(img => {
    // 转成图片，生成图片地址(如需将图片转为file 文件，请自行处理)
    this.imgUrl = img.toDataURL("image/png"); //可将 canvas 转为 base64 格式
  });
}