前端实现html转canvas，html转img，html转pdf

前端实现html转canvas，html转img，html转pdf

​ 最近项目上有一个需求就是由纯前端html转化生成PDF，开始也是一脸蒙蔽的，但是咱也不能说不会做啊是吧，毕竟现在找份满意的工作也不容易😂

想要实现这个功能需要借助两个包

1. html2canvas
2. jspdf

我的实现思路如下

1. 利用dangerouslySetInnerHTML可以吧后端返回的html字符串模板渲染，如果不懂可以看我的另外一篇文章总结dangerouslySetInnerHTML的用法

2. 利用``html2canvas把html模板转化成canvas`

3. 利用canvas的方法toDataURL()，该方法返回一个图片URL路径

4. 利用jspdf把第三步生成的图片转化成pdf

一：html转化成canvas

import React, {
    Component, } from 'react';
import {
    Button } from 'antd';
import html2canvas from 'html2canvas';
const jsPDF = require('jspdf');

// 这个是html渲染模板
const HtmlTem = '<div id=domTem style=background-color:pink;width:200px;height:100px>我是Html</div>'
export default class Home extends Component{
   
    htmlToCanvas = () => {
   
        //获取模板HtmlTem的唯一id
        const domTem = document.getElementById('domTem');
        const createdCanvas = document.createElement('canvas');
            const scale = 3;
            // canvas整个画布的实际宽高，它与canvas.style.width/height是有区别的，后者是指的浏览器的渲染宽/高
            createdCanvas.width= 200 *scale ;
            createdCanvas.height = 100 *scale;
            createdCanvas.style.marginTop= '150px';
        html2canvas(domTem,{
   
            canvas:createdCanvas,
            scale, // 生成的canvas在浏览器渲染显示宽高 = 需要转化的html模板的width/height * scale(这里是600px,300px)
        }).then(function(canvas) {
   
          // 生成的canvas展示在body
            domTem.appendChild(canvas);
        });
    }

    render() {
   
        return(
            <div style={
   {
   width:'600px',height:'600px',border:"1px solid"}