JS生成PDF文件

在做项目时,需要将后端返回来的数据经过前端网页生成pdf文件,供用户下载,这里便提供此功能的方法及demo,可以作为参考:

代码:

var pdf = new jsPDF('p','pt','a4');
  pdf.internal.scaleFactor = 1; //可以调整缩放比例
  var options = {
  //pagesplit: true //分页
  pagesplit: false//不分页
};

//执行调用

//下面的0,0为截取的位置(默许为0,0)

//$('.header .h1Title').text()为我自定义的标题,具体根据自身的项目来设置
pdf.addHTML($('.wrap').get(0),0,0,options,function() {
  pdf.save($('.header .h1Title').text()+'.pdf');
});

效果请下载以下demo查看:

 http://files.cnblogs.com/files/waitingbar/toPdfDemo.zip

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/9089377.html

使用 JavaScript 生成 PDF 文件有多种方法: - **使用 jsPDF 库**:jsPDF 是一个强大且易用的 PDF 生成库,支持浏览器和 Node.js 环境,无论是简单的文本处理,还是复杂的排版和自定义字体处理都能胜任。掌握基本用法后,可将 PDF 功能无缝集成到 JavaScript 项目中 [^1]。 - **前端页面打印生成**:在前端可以通过获取页面元素内容,替换页面内容后触发浏览器的打印功能来生成 PDF 文件。例如在 Vue 项目中,获取特定元素的 HTML 内容,替换页面 body 的内容,调用 `window.print()` 打印当前页面,之后再恢复页面原始内容 [^4]。示例代码如下: ```vue <template> <div> <el-button type="text" @click="ExportSavePdf()"> 结果导出 </el-button> <div id="pdfCentent"> <!-- 给需要转化为pdf文件的内容放进去并设一个id作为唯一标识 --> <h1>我是转化为PDF文件的内容</h1> </div> </div> </template> <script> export default { data() { return {}; }, methods: { ExportSavePdf() { let subOutputRankPrint = document.getElementById('pdfCentent'); let newContent = subOutputRankPrint.innerHTML; let oldContent = document.body.innerHTML; document.body.innerHTML = newContent; window.print(); window.location.reload(); document.body.innerHTML = oldContent; return false; }, }, }; </script> ``` - **使用浏览器 API 结合网页内容生成**:可以通过以界面化模式打开浏览器,在浏览器上新开 Tab 页,打开指定网页链接,然后调用 `page.pdf` 方法将当前页打印成 PDF 文件,最后关闭浏览器。例如以百度新闻为例,创建 `/server/index.mjs` 文件进行代码编写 [^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值