页面局部生成图片下载

业务需求：需要将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父节点
      html2canvas(card).then(function(canvas) {
        let img = new Image();
        img = canvas.toDataURL('image/png');
        var d = document.createElement("a");
        d.download = pngName.png;
        d.href = img;
        d.click();
        d.remove();
      });
    },

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