react导出pdf并上传给后台

最新推荐文章于 2025-05-21 11:23:59 发布

Hero_rong

最新推荐文章于 2025-05-21 11:23:59 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js html2canvas 导出pdf 浏览器截图

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/121359119

本文介绍如何在React应用中利用html2canvas库将网页内容截图并转换为PDF，然后将生成的PDF文件上传到后台。通过示例代码展示了具体的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用html2canvas截图，html2canvas官方http://html2canvas.hertzen.com/

1.先导出

直接上代码

downloadPdf = async (refs,name)=>{
    //导出字体样式失效问题
    refs.style.fontVariant = 'small-caps!important';
    //设置导出样式
    this.setStyle(refs);
    //refs为dom节点，name为图片名称
    const canvas = await html2canvas(refs);
    const width = canvas.width,height=canvas.height;
    const imageData = canvas.toDataURL('image/png');
    //三个参数，第一个方向，第二个单位，第三个尺寸格式
    let doc;
    if(width>height){
        doc = new JsPDF('l','mm',[width*0.25,height*0.25]);
    }else{
        doc = new JsPDF('p','mm',[width*0.25,height*0.25]);
    }
    //第三个第四个分别控制 文字距离左边，文字距离上边的距离，后两个参数控制添加图片的尺寸，第八个压缩参数：‘NONE’，‘FAST’，‘MEDIUM’，and‘SLOW’
    //参考手册 
    //往canvas里面添加图片
    doc.addImage(imageData,'png',0,0,width*0.25,height*0.25,'','MEDIUM');
    //保