• 最简洁的代码
<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的更多相关文章

  1. 用js生成PDF的方案

    在java里,我们常用Itext来生成pdf,在pdf文件里组合图片,文字,画表格,画线等操作,还会遇到中文支持的问题. 那好,现在想直接在web前端就生成pdf怎么办,目前有以下几个解决方案 1:J ...

  2. js生成pdf报表

    由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化.因此需要用到js生成生报表: 用到的组件: jquery.j ...

  3. js 生成 pdf 文件

    话不多说好吧, 直接上demo图: 直接上代码好吧:(要引入的两个js  链接我放最后) <!DOCTYPE html> <html> <head> <met ...

  4. JS生成PDF文件

    代码: var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //p ...

  5. 前端生成pdf文件之pdfmake.js

    转载:点击查看原文 pdfmake.js是一个简单的生成pdf文件的插件. pdfmake.js     https://files.cnblogs.com/files/s313139232/pdfm ...

  6. js将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...

  7. 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all

    在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...

  8. 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  9. JS导出PDF插件(支持中文、图片使用路径)

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...

  10. 生成PDF的新选择-Phantomjs

    最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求:我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下 ...

随机推荐

  1. RestfulApi 学习笔记——内容协商(三)

    前言 什么是内容协商呢?是这样的,我们在请求的时候都有两个属性,一个是Content-Type,另一个是accept,这两个什么意思呢? content-type 这个是表示自己传输的是什么内容,就像 ...

  2. 如何将 ASP.NET Core MVC 项目的视图分离到另一个项目

    如何将 ASP.NET Core MVC 项目的视图分离到另一个项目 在当下这个年代 SPA 已是主流,人们早已忘记了 MVC 以及 Razor 的故事.但是在某些场景下 SSR 还是有意想不到效果. ...

  3. mac版本vscode窗口崩溃crashed

    1.截图 出现时机 当安装依赖的时候大概率会出现,甚至安装一次依赖会出现几次 解决 具体原因未知 重新启动电脑以及退出软件都不能解决 去官网重新下载,重新安装问题解决

  4. Oracle对一个字符串中的数字与非数字进行分割

    Oracle对一个字符串中的数字与非数字进行分割 Oracle中对一个字符串中的数字与非数字进行分割 思路很简单,就是将字符串分成数字与非数字 则只要将字符串中的数字全部换成空,就是分割后的非数字字符 ...

  5. 力扣1127(MySQL)-用户购买平台(困难)

    题目: 支出表: Spending 这张表记录了用户在一个在线购物网站的支出历史,该在线购物平台同时拥有桌面端('desktop')和手机端('mobile')的应用程序.这张表的主键是 (user_ ...

  6. 注册配置、微服务治理、云原生网关三箭齐发,阿里云 MSE 持续升级

    简介: MSE 云原生网关作为托管型的独享实例,与部署业务应用的资源解耦,并支持过载保护.故障自愈.限流降级等功能,确保流量高峰时的稳定性.其优异的性能表现使费芮不需要高规格的资源配置即可支撑大规模的 ...

  7. 通过部署流行Web框架掌握Serverless技术

    简介: 通过学习部署流行Web框架,如SpringBoot,Express,Web IDE,让你掌握Serverless函数计算架构和技术,领略弹性并发,高可用的好处.大家好,我是霍大侠,欢迎来到我的 ...

  8. 阿里开源支持10万亿模型的自研分布式训练框架EPL(EasyParallelLibrary)

    ​简介:EPL背后的技术框架是如何设计的?开发者可以怎么使用EPL?EPL未来有哪些规划?今天一起来深入了解. ​ 作者 | 王林.飒洋 来源 | 阿里技术公众号 一 导读 最近阿里云机器学习PAI平 ...

  9. PolarDB for PostgreSQL 内核解读 :HTAP架构介绍

    简介:在 PolarDB 存储计算分离的架构基础上我们研发了基于共享存储的MPP架构步具备了 HTAP 的能力,对一套 TP的数据支持两套执行引擎:单机执行引擎用于处理高并发的 OLTP:MPP跨机分 ...

  10. Fluid — 云原生环境下的高效“数据物流系统”

    简介: 为了解决大数据.AI 等数据密集型应用在云原生计算存储分离场景下,存在的数据访问延时高.联合分析难.多维管理杂等痛点问题,南京大学 PASALab.阿里巴巴.Alluxio 在 2020 年 ...