js 生成pdf
- 最简洁的代码
<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jspdf.debug.js" type="text/javascript" charset="utf-8"></script>
document.getElementById("savePdf").onclick = function() {
html2canvas(document.getElementById("tabContainer"), {
onrendered: function(canvas) {
//通过html2canvas将html渲染成canvas,然后获取图片数据
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdfWidth = 210;
const pdf = new jspdf('p', 'mm', 'a4');
pdf.addImage(pageData, 'JPEG', 25, 25, pdfWidth - 50, ((pdfWidth - 50) / canvas.width) * canvas.height);
// 保存
pdf.save(`fileName.pdf`);
}
});
}
js 生成pdf的更多相关文章
- 用js生成PDF的方案
在java里,我们常用Itext来生成pdf,在pdf文件里组合图片,文字,画表格,画线等操作,还会遇到中文支持的问题. 那好,现在想直接在web前端就生成pdf怎么办,目前有以下几个解决方案 1:J ...
- js生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化.因此需要用到js生成生报表: 用到的组件: jquery.j ...
- js 生成 pdf 文件
话不多说好吧, 直接上demo图: 直接上代码好吧:(要引入的两个js 链接我放最后) <!DOCTYPE html> <html> <head> <met ...
- JS生成PDF文件
代码: var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //p ...
- 前端生成pdf文件之pdfmake.js
转载:点击查看原文 pdfmake.js是一个简单的生成pdf文件的插件. pdfmake.js https://files.cnblogs.com/files/s313139232/pdfm ...
- js将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...
- 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all
在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...
- JS导出PDF插件(支持中文、图片使用路径)
在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...
- 生成PDF的新选择-Phantomjs
最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求:我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下 ...
随机推荐
- Android Studio制作简单登录界面
实现目标 应用线性布局设计登录界面,要求点击输入学号时弹出数字键盘界面,点击输入密码时弹出字母键盘,出现的文字.数字.尺寸等全部在values文件夹下相应.xml文件中设置好,使用时直接引用.当用户名 ...
- leetcode:763. 划分字母区间
763. 划分字母区间 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示例 1: 输入: S = & ...
- Spring开发:动态代理的艺术与实践
本文分享自华为云社区<Spring高手之路17--动态代理的艺术与实践>,作者: 砖业洋__. 1. 背景 动态代理是一种强大的设计模式,它允许开发者在运行时创建代理对象,用于拦截对真实对 ...
- EventBridge 在 SaaS 企业集成领域的探索与实践
简介: 当下降本增效是各行各业的主题,而 SaaS 应用作为更快触达和服务业务场景的方式则被更多企业熟知和采用.本文将结合实际业务场景讲述在 SaaS 行业的洞察与 SaaS 集成的探索实践. 作者: ...
- 技术干货|基于Apache Hudi 的CDC数据入湖「内附干货PPT下载渠道」
简介: 阿里云技术专家李少锋(风泽)在Apache Hudi 与 Apache Pulsar 联合 Meetup 杭州站上的演讲整理稿件,本议题将介绍典型 CDC 入湖场景,以及如何使用 Pulsa ...
- [FAQ] puppeteer 清空输入框的值 并 重新输入
一种方式是,清空输入框可以通过如下注入代码实现,但是可能存在 和页面本身的操作 存在优先级问题. await page.evaluate( () => document.getElementBy ...
- [CI/CD] 持续集成 & 持续部署 之 Github Actions
1. 配置 ssh 免密登录 看这篇简短的就够了 SSH 免密登录主机/服务器 怎么操作 ? 2. 定义 workflow Github Actions 针对项目语言提供了一系列模板,通过稍加修改并组 ...
- 浅析mvvm模式和mvc模式的区别和联系
三层架构与MVC模式 三层架构 三层架构是一种以实现"高内聚,底耦合"为目标,的代码架构方法,它将整个业务分为,表示层,业务层,数据访问层(Dao层). MVC模式 MVC模式是一 ...
- PostMan测试图片上传接口的方法
一.选择POST后添加接口地址 二.选择Body下的from-data 注:Headers不要加参数 三.填写key,再key后的下拉选择file,然后选择文件 注:key并不是图片名称,而是接口接收 ...
- DbHelperSQL
using System; using System.Collections; using System.Collections.Generic; using System.Data; using S ...