Vue中将dom元素转成图片显示并且可以下载

最新推荐文章于 2024-07-22 16:32:03 发布

逍遥生^

最新推荐文章于 2024-07-22 16:32:03 发布

阅读量630

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/error534/article/details/117947977

版权

本文介绍了在Vue项目中如何将DOM元素转换为图片并允许用户下载的步骤，包括安装依赖、引入组件、设置目标元素及实现转换方法。

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

第一步：安装依赖

npm install html2canvas --save

第二步：在需要用的地方引入

import html2canvas from "html2canvas"

第三步：把需要转成图片的元素放到id="mycanvas"盒子里

  <div  class="canvas_box" id="mycanvas" ref="mycanvas">
		//需要转图片的元素
  </div>
  <button @click="toImg('mycanvas')">转图片</button>

第四步：方法toImg里写实现

toImg() {
        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        // 先获取你要转换为img的dom节点
        var node = document.getElementById("mycanvas"); //传入的id名称
        var width = node.offsetWidth; //dom宽
        var height = node.offsetHeight; //dom高
        var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
        html2canvas(node, {
          width: width,
          heigth: height,