生成pdf并上传

import html2Canvas from 'html2canvas';
import jsPDF from 'jsPDF';
import reqwest from 'reqwest';
// 点击生成pdf 
okCreatePDF = () => {
	this.createPDF().then(( res ) => {
        this.uploadPdf(res);  // 在then 中获取返回的文件
    })
}
// 生成pdf 文件
createPDF = () => {
        const _this = this;
        return new Promise(( resolve, reject )=>{
            html2Canvas(document.getElementById(`assetBorrow${this.props.paneKey}`),{
                allowTaint: true,
                useCORS: true 
            }).then(function (canvas) {
                try {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    //var pageHeight = contentWidth / 2807*1985;
                    var leftHeight = contentHeight;
                    //页面偏移
                    var position = 0;
                    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 
                    var imgWidth = 592.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    var pdf = new jsPDF('', 'pt', 'a4');

                    //放大会清晰一点
                    pdf.internal.scaleFactor = 1;
                    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 40, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position+40, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save('pdf');//可以生成一份给用户
                    let pdfData = pdf.output('datauristring')  //将文件另存一份直接上传
                    resolve(pdfData)
                } catch (error) {
                    console.log(error);
                }
            })
        })
    }

// 上传文件
uploadPdf = ( res ) => {
        let pdfBase64Str = res;  
        let title ="上传pdf";// 设置上传文件的文件名
        var myfile = this.dataURLtoFile(pdfBase64Str, title + ".pdf");//调用一下下面的转文件流函数
        var formData = new FormData();
        formData.append("file", myfile); // 文件对象
        let _this = this;
        reqwest({
            url:'上传文件的路径',
            method: 'post',
            processData: false,
            data: formData,
            success: (resp) => {
                if (resp.success) {
                    
                } else {
                    
                }
            },
            error: (err) => {

            }
        });
    }
	/*
        将base64转换为文件,接收2个参数，第一是base64，第二个是文件名字
        最后返回文件对象
    */
    dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    }

标签：文件,canvas,生成,leftHeight,new,var,pdf,上传
来源： https://blog.csdn.net/weixin_46880303/article/details/118812288