美文网首页
jsPdf踩坑之路

jsPdf踩坑之路

作者: 秋玄语道 | 来源:发表于2023-02-21 15:51 被阅读0次

本文只讲html生成pdf
官网文档地址:http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html

一、安装

npm install jspdf

二、使用

<button onclick="print()">生成PDF</button>
<div id="printID">pdf内容</div>
import { jsPDF } from "jspdf"
print(){
    const doc = new jsPDF({
      unit:"px",
      hotfixes: ["px_scaling"],
      compress: true
    });
    const pdf:any = document.querySelector("#printID")
    const width = doc.internal.pageSize.width - 80  
    doc.html(pdf,{
        callback: doc=> {
          window.open(doc.output("bloburi"))
        },
        margin:[30,40,30,40],
        windowWidth: width, //处理屏幕怎么缩放生成pdf结果一样
        width: width, //处理屏幕怎么缩放生成pdf结果一样
      })
}

相关文章

  • html2canvas+jspdf踩坑之路

    最近刚完成了项目中所有模块的详情页导出pdf功能。本来开始后端接了这个活,前端只要传过去单号就好,可是做到最后一直...

  • jsPDF 分页分割问题踩坑

    jsPDF 是一个基于用于生成 PDF 文档 JS 库 GitHub: https://github.com/Mr...

  • 踩坑之路

    1,蓝牙搜索重点:android10以上搜索蓝牙需要开启定位 2,在 Android 6.0 中,我们取消了对 A...

  • thymeleaf 踩坑之路(一) 数字(number) 算法坑

    项目地址:https://github.com/yexuebm/utils thymeleaf 踩坑之路(一) 数...

  • 踩坑要趁早

    踩坑是一个好事,想要做成某些事有些坑是必经之路,踩过坑后通过反思学习,能力进步就会加快,有些父母总是怕吃不饱穿不暖...

  • webpack踩坑之路

    webpack+babel常用包和插件 没有设置repository和descriptionnpm WARN de...

  • Spark踩坑之路

    当以cluster/client运行spark时候,运行在如下所示,没有任何异常报错。 接下来就是找日志,发现卡在...

  • proguard 踩坑之路

    背景: 最近项目中引入了一个三方的库,然后在打包的时候发现一些build的一些task没有执行。原先release...

  • RecyclerView踩坑之路

    要使用RecyclerView需添加依赖:compile 'com.android.support:recycle...

  • small 踩坑之路

    新的项目使用了插件化开发,使用了small 在跳转其他插件的其他页面的时候,发现跳转找不到Activity。研究发...

网友评论

      本文标题:jsPdf踩坑之路

      本文链接:https://www.haomeiwen.com/subject/uhtokdtx.html