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下 ...
随机推荐
- 密码学中的RSA算法与椭圆曲线算法
PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全.密码学.联邦学习.同态加密等隐私计算领域的技术和内容. 在数字安全领域,加密算法扮演着至关重要的角色.它们确保了信息的机 ...
- vue使用 elementUI中el-upload的遇到的问题总结
使用场景,使用el-upload上传文件,选择文件后不立即上传到服务器上,点击提交按钮时与其他form表单数据一起提交,类似的需求,相信有很多小伙伴遇到,可能也会遇到跟我一起的问题,在这里记录一下 & ...
- vue3.0 中文文档(暂时)地址
https://v3.cn.vuejs.org/ https://vue-docs-next-zh-cn.netlify.app/guide/installation.html#vue-devtool ...
- Vue3.0 框架搭建的后台管理模板
一个Vue3.0框架搭建的后台管理模板 开源vue3.0版本基于vue3.x+ant-design-vue构建的免费开源admin项目,star高达8.4K+ 支持电脑端.手机.平板等平台 底层使用e ...
- 顺通ERP:精细敏捷的设计理念,得到了消费者的喜爱
顺通ERP是近年来备受关注的一款ERP品牌,其设计精细,操作便捷,备受消费者喜爱.那么,顺通ERP到底怎么样呢?属于什么档次呢? 首先,从品质上来看,顺通ERP具备高度的稳定性,能够确保企业的日常运营 ...
- Quick Audience 营销活动功能一期上线
简介: 营销活动为Quick Audience(QA)用户洞察下的一个功能模块,通过这个模块,可以将QA侧生成的受众以及营销渠道全部关联起来,从营销活动的视角,一站式完成活动目标制定.活动计划制定到 ...
- python语言中的装饰器详解
装饰器是一个用于封装函数或类的代码的工具.它显式地将封装器应用到函数或类上,从而使它们选择加入到装饰器的功能中.对于在函数运行前处理常见前置条件(例如确认授权),或在函数运行后确保清理(例如输 ...
- dotnet 如何将 Microsoft.Maui.Graphics 对接到 UNO 框架
本文将和大家介绍如何将 Microsoft.Maui.Graphics 对接到 UNO 框架里面.一旦完成 Microsoft.Maui.Graphics 对接,即可让 UNO 框架复用现有的许多绘制 ...
- dotnet 读 WPF 源代码笔记 为什么自定义的 UserControl 用户控件不能跨程序集继承
从设计上,用户控件 UserControl 就不是一个合适用来多次继承的类型,更不要说进行跨程序集继承自定义的 UserControl 用户控件.对于大部分的用户控件来说,都是采用组合现有的控件来实现 ...
- 超级好用的 IEC104 主站/客户端模拟器
目录 超级好用的 IEC104 主站/客户端模拟器 主要功能 软件截图 超级好用的 IEC104 主站/客户端模拟器 官网下载地址:http://www.redisant.cn/iec104clien ...