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

<template>
  <el-table :data="sticker" border style="width: 100%" id="stickerList">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="stickerName" label="名字" width="180" />
    <el-table-column prop="context" label="内容" />
  </el-table>

  <img :src="base64img" alt="">
  
  <el-button type="primary" @click="printPicture()">截图</el-button>

</template>

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

script

<script setup>
import { stickerListService } from '@/api/sticker.js'
import { ref } from 'vue';
import { onMounted } from 'vue'
import html2canvas from 'html2canvas'


const base64img = ref()

const printPicture = function(){
  html2canvas(document.querySelector('#stickerList')).then((canvas) => {
    // 转换成base64格式，这个格式可以挂载到img里，也可以下载下来，也可以打压缩包下载下来
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
    base64img.value = `data:image/png;base64,${base64}`
    console.log(base64img.value);
  }).catch((err) => {
      
  });
}


const sticker = ref([
  {
    id: '',
    stickerName: '',
    context: ''
  }
])

const stickerList = async function () {
  let result = await stickerListService()
  sticker.value = result.data
}

onMounted(() => {
  stickerList()
})
</script>

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

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

效果：