React前端html导出pdf，并自动上传到后端服务器

html导出PDF

最近做了个知识管理功能，其中有个需求是将文档导出为pdf，所以就前端实现了一下。但由于前端导出的全部是图片，文字无法复制，最终由后端实现导出。

github地址：https://github.com/eKoopmans/html2pdf.js

package.json引入"html2pdf.js": "^0.9.1"

具体代码如下：

import html2pdf from 'html2pdf.js';

exportPdf = () => {
	// 要导出的dom节点，注意如果使用class控制样式，一定css规则
    const element = document.getElementById('doc');
    // 导出配置
    const opt = {
      margin: 1,
      filename: '导出的pdf名称',
      image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
      html2canvas: { scale: 2, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
    };
    if (element) {
      html2pdf().set(opt).from(element).save(); // 导出
    }
};

不下载文件，直接上传PDF文件到后端：

import html2pdf from 'html2pdf.js';

exportPdf = () => {
	// 要导出的dom节点，注意如果使用class控制样式，一定css规则
    const element = document.getElementById('doc');
    // 导出配置
    const opt = {
      margin: 1,
      filename: '导出的pdf名称',
      image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
      html2canvas: { scale: 2, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
    };
    if (element) {
      	const doc = html2pdf().set(opt).from(element);
	    doc.toPdf().get('pdf').then(function (pdfObj) {
	        const perBlob = pdfObj.output('blob');
	        var formData = new FormData();
	        // 这里调用后端接口
	    });
    }
};