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

最新推荐文章于 2025-03-29 18:39:26 发布

原创

最新推荐文章于 2025-03-29 18:39:26 发布 · 775 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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

第一步：安装依赖

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,
          backgroundColor: "#ffffff", //背景颜色 为null是透明
          dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
          scale: scale,