页面局部生成图片下载

标签：index img 图片下载 生成 html2canvas let 图片 页面

业务需求：需要将UI设计图结合后台数据拼成所需要的图片并实现下载功能。

 

本文所用插件：html2canvas

git地址：https://github.com/niklasvh/html2canvas

用法：

下载依赖：yarn add html2canvas -d

html：

      <div id="dom-id">         <img> // UI设计图          <span/>后台数据</span>       </div>

js：
import html2canvas from 'html2canvas'
 /**
     * 生成图片
     */
    makeImages() {
      let card = document.getElementById('dom-id') // 获取需要生成图片的dom父节点
      let pngName = this.fileName
      html2canvas(card).then(function(canvas) {
        let img = new Image();
        img = canvas.toDataURL('image/png');
        var d = document.createElement("a");
        d.download = pngName.slice(0,-4)+'.png';
        d.href = img;
        d.click();
        d.remove();
      });
    },

ps）坑：下载图片包含的本地图片若作为背景图会出现多余样式，比如多一条线，作为img并用z-index调整组件堆叠优先级，（position属性要设置一致z-index才会生效）样式正常。

标签：index,img,图片下载,生成,html2canvas,let,图片,页面
From： https://www.cnblogs.com/xiaoliulang-cc/p/17058124.html