html2pdf.js 前端导出pdf

官方地址： https://ekoopmans.github.io/html2pdf.js/

import React, { useState, useEffect, useRef } from 'react';
import html2pdf from 'html2pdf.js';

    const downloadPdf = () => {
        var element = document.getElementById('element-to-print');
       var opt = {
            margin: 12,
            filename: `${datas?.title}.pdf`,
            image: { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 2, allowTaint: true },
            pagebreak: { mode: 'avoid-all', after: '.avoidThisRow' },    // 智能分页，防止图片被截断
            enableLinks: true  // 支持文本中放链接，可点击跳转
        };
        html2pdf(element, opt);
    };

render(){ 
            <div className={styles.pdfModal} id={'element-to-print'}>
            <div id="title" className={styles.toptitle}>
                {data?.title}
            </div>
            <div className={styles.time}>{date}</div>
            <hr className={styles.line}></hr>
            ......
            ......
            ......
        </div>
}

scss文件：
.pdfModal {
    background-color: #fff;
    width: 100%;
}

pdf模版

注意： 页面中的图片link如果是后端传来的，要解除跨域限制，因为carves不支持图片跨域请求，从而导致pdf生成失败
解决方法： 后端传图片文件流，将文件流转化成base64编码