html2canvas快速使用

一、概述

        html2canvas是一个HTML渲染器，是一个脚本，它允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”。底层是基于DOM的，根据页面上可用的信息构建屏幕截图，它没有制作实际的屏幕截图，因此生成的图片并不一定是100%一致的。

安装

指令：npm install --save html2canvas

使用时引入

import html2canvas from 'html2canvas'

用法

使用带有一些（可选）选项的 html2canvas 渲染元素，简单的例子html2canvas(element, options)

html2canvas(element, options)
        第一个参数是要截图的dom元素
        第二个参数是个对象
            {
                allowTaint: 
                background: canvas背景颜色，默认为透明
                width: canvas宽度
                height: canvas高度
                letterRendering: 在设置了字间距的时候有用
                logging: 在console.log()中输出信息
                proxy: 代理地址
                taintTest: 是否在渲染前测试图片
                timeout: 图片加载延迟，默认延迟为0，单位毫秒
                useCORS: 允许跨域
            }
    

使用案例

一个动态生成的列表，为他截图

template

这里使用了Element-plus标签，在里面创建了一张表，一张图，一个按钮 

script

        其中，querySelector（）方法是文档对象模型Document引用的一个方法，它可以返回文档中与指定选择器或选择器组匹配的第一个Element对象。如果找不到匹配项，则返回null。

        stickerListService是我自己写的前后端分离接口，你可以直接自己写一组静态的数据。

效果：