Vue 中使用 html2canvas 把 html 元素导出为图片

最新推荐文章于 2024-08-23 11:36:02 发布

阳光的男夹克

最新推荐文章于 2024-08-23 11:36:02 发布

阅读量250

点赞数

分类专栏： Vue 2

本文链接：https://blog.csdn.net/weixin_44640323/article/details/119635304

版权

Vue 2 专栏收录该内容

63 篇文章 4 订阅

订阅专栏

本文介绍了如何在Vue项目中使用html2canvas库进行网页截屏操作。首先通过npm安装html2canvas，然后引入并注册到组件中。接着展示了基本用法，以document.body为例进行截图。最后在Vue组件内，针对特定ID的元素进行截图，并生成图片，添加到页面供用户下载。示例代码详细解释了每个步骤，包括设置放大比例、背景颜色、处理模糊问题等选项。

摘要由CSDN通过智能技术生成

一、安装

npm install html2canvas

二、引入并注册 html2canvas

import html2canvas from 'html2canvas';

components: {
    html2canvas
}

三、基础使用，document.body 为要截图的元素

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

四、Vue 中使用

// 给元素设置一个 id 方便获取该元素
<div @click="jieping" id="imageWrapper"> html2canvas </div>

// 导出图片
jieping() {
  this.$nextTick(() => {
    html2canvas(document.getElementById('imageWrapper'),{
      scale:3,      // 放大
      useCORS: true, // 使用CORS从服务器加载图像
      async: false, // 异步解析和呈现元素
      background: "#ffffff", // 背景颜色
      dpi: 300, // 处理模糊问题
    }).then(canvas => {
      const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
      const finalImageSrc = "data:image/jpeg;base64," + img
      // 添加a标签用于下载
      const aElem = document.createElement('a')
      document.body.appendChild(aElem)  // 223kb
      aElem.href  = finalImageSrc
      // 图片下载名
      aElem.download = "组织机构图.jpg"
      aElem.click()
      document.body.removeChild(aElem)
    });
  })
},