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下 ...
随机推荐
- State 和 Props的理解以及区别
一.state 一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state,一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用setState来改变,从而达 ...
- 探索Kimi智能助手:如何用超长文本解锁高效信息处理新境界
目前,Kimi备受瞩目,不仅在社交平台上引起了广泛关注,而且在解决我们的实际问题方面也显示出了巨大潜力.其支持超长文本的特性使得我们能够更加灵活地配置信息,避免了频繁与向量数据库进行交互以及编写提示词 ...
- verilog中端口定义方式以及如何使用变量
一.module端口定义方式 目前有两种方式能够对module端口进行定义, 第一种是我目前使用比较多的,把I/O说明写在端口声明语句里,方式A: 1 module block( 2 input a, ...
- 第五課-Channel Study TCP Listener & Web Service Listener
示例描述: 我们将研究如何获取相当常见的HL7 v2消息并将其映射到自定义Web Service接口服务.在许多实际情况下,当我们要连接到HIE,EMPI,数据仓库或数据存储库时,必须这样做.此用例说 ...
- 力扣521(java&python)-最长特殊序列Ⅰ(简单)
题目: 给你两个字符串 a 和 b,请返回 这两个字符串中 最长的特殊序列 的长度.如果不存在,则返回 -1 . 「最长特殊序列」 定义如下:该序列为 某字符串独有的最长子序列(即不能是其他字符串的 ...
- 合阔智云核心生产系统切换到服务网格 ASM 的落地实践
简介: 合阔智云提供了从全渠道交易管理到订单履约再到门店供应链完整的餐饮零售连锁解决方案,整个方案采取微服务设计,并深度使用了 Kubernetes 作为生产调度平台. 作者:刘如鸿 背景 合阔智 ...
- 【产品动态】一文详细解读智能数据构建产品Dataphin的“规划”功能
简介: 数据中台是传统的数据仓库的一种升级, 是数据采集.建设.管理与使用的一整套体系,Dataphin是一个构建数据中台的强大工具, 核心优势是在数据的建设与管理上引入了阿里巴巴多年来数据中台建设 ...
- 前沿分享|阿里云数据库资深技术专家 姚奕玮:AnalyticDB MySQL离在线一体化技术揭秘
简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云数据库资深技术专家 姚奕玮关于"AnalyticDB MySQL离在线一体化技术揭秘&q ...
- 图像检索在高德地图POI数据生产中的应用
简介: 高德通过自有海量的图像源,来保证现实世界的每一个新增的POI及时制作成数据.在较短时间间隔内(小于月度),同一个地方的POI 的变化量是很低的. 作者 | 灵笼.怀迩 来源 | 阿里技术 ...
- 5分钟搞定Loki告警多渠道接入
简介: Loki是受Prometheus启发的水平可扩展.高可用.多租户日志聚合系统.用户既可以将Loki告警直接接入SLS开放告警,也可以先将Loki接入Grafana或Alert Manager ...