将HTML页面内容转为图片并下载及浏览器打印功能（亲测有用）

官方网站
https://html2canvas./

1：直接下载html2canvas插件

直接点击html2canvas.min.js，然后直接ctrl+s进行保存即可

2：使用npm进行下载

npm install html2canvas

二：html2canvas使用介绍

在html2canvas中主要使用两种方法

1：将html内容写入到canvas中

html2canvas(element，options).then((canvas) =>{})

参数说明：

element：需要将html内容写入canvas的jQuery对象

options：配置信息

常用的配置基本信息：

scale：缩放比例,默认为1

allowTaint：是否允许跨域图像污染画布，默认为false

useCORS：是否尝试使用CORS从服务器加载图像，默认为false

width：canvas画布的宽度,默认为jQuery对象的宽度

height：canvas画布的高度,默认为jQuery对象的高度

backgroundColor：/画布的背景色，默认为透明(#fff),参数可以为#表示的颜色，也可以使用rgba

2：将canvas画布信息转化为base64格式图片

canvas.toDataURL("image/png")

如果你的html内容中有指定的内容不写入到canvas中的话，你可以给标签添加如下属性

data-html2canvas-ignore="true"

2、在需要的组件中引入html2canvas

// 导入整个模块的内容import * as html2canvas from 'html2canvas';

3、定义方法，将数据转换为canvas

// #mainTable是数据表格的idtakeScreenShot() {        // 使用html2canvas插件，将数据源中的数据转换成画布。
        html2canvas(document.querySelector("#mainTable")).then(canvas => {            // 修改生成的宽度
            canvas.style.width = "1000px";
            console.log(canvas, "生成的画布文件");
            this.canvasImg = canvas.toDataURL("image/png");
        });
    }    
// 然后给初始化的public canvasImg: any = ""; 复制，他就是图片地址。// 展示图片
<img src="{{canvasImg}}" />

4、将图片下载到本地，定义转换图片格式方法。

// filename: 文件名称， content: canvas图片流地址
    downloadFile(filename, content) {        var base64Img = content;        var oA = document.createElement('a');
        oA.href = base64Img;
        oA.download = filename;        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        oA.dispatchEvent(event);
    }    
    
    // 方法调用
    saveImgLocal() {        this.downloadFile("导出图片", this.canvasImg);
    }

5、下载

<button label="下载" pButton (click)="saveImgLocal()"></button>

6、设置画布大小

var shareContent = document.getElementById("mainTable");//需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement("canvas"); //创建一个canvas节点
        var scale = 1; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        var opts = {            scale: scale, // 添加的scale 参数
            canvas: canvas, //自定义 canvas
            logging: true, //日志开关
            width: width, //dom 原始宽度
            height: height //dom 原始高度
        };        html2canvas(shareContent, opts).then(canvas => {            this.canvasImg = canvas.toDataURL("image/png");
            console.log(canvas)
        });

自已调用的过程：

<script src="assets/myassets/html2canvas/html2canvas.min.js"></script>

shareContent = .()width = shareContent.height = shareContent.canvas = .()scale = canvas.= width * scalecanvas.= height * scalecanvas.().(scalescale)opts = {
  : scale: canvas: : width: height }html2canvas(shareContentopts).(canvas => {
  imgUri  = canvas.().(canvas)
  .(imgUri)
  newwindow = .()(shareContent !== && newwindow) {
    newwindow...= shareContent.newwindow.()newwindow.()}
})