转

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <button id="exportToPdf">导出为PDF</button>

<div id="export_content">

     <div>

         sdsf

     </div>

     <div style="color: red">

        sdsf

        1231313

    </div>

</div>

</body>

<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

<script type="text/javascript">

    var downPdf = document.getElementById("exportToPdf");

    downPdf.onclick = function () {

        html2canvas(

                document.getElementById("export_content"),

                {

                    dpi: 172,//导出pdf清晰度

                    onrendered: function (canvas) {

                        var contentWidth = canvas.width;

                        var contentHeight = canvas.height;

                        //一页pdf显示html页面生成的canvas高度;

                        var pageHeight = contentWidth / 592.28 * 841.89;

                        //未生成pdf的html页面高度

                        var leftHeight = contentHeight;

                        //pdf页面偏移

                        var position = 0;

                        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）

                        var imgWidth = 595.28;

                        var imgHeight = 592.28 / contentWidth * contentHeight;

                        var pageData = canvas.toDataURL('image/jpeg', 1.0);

                        var pdf = new jsPDF('', 'pt', 'a4');

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

                        //当内容未超过pdf一页显示的范围，无需分页

                        if (leftHeight < pageHeight) {

                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);

                        } else {

                            while (leftHeight > 0) {

                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

                                leftHeight -= pageHeight;

                                position -= 841.89;

                                //避免添加空白页

                                if (leftHeight > 0) {

                                    pdf.addPage();

                                }

                            }

                        }

                        pdf.save('content.pdf');

                    },

                    //背景设为白色（默认为黑色）

                    background: "#fff"

                })

    }

</script>

</html>

如果是vue版本的  注意一定要用 cnpm下载，用npm是下载不过来的

cnpm install vue-pdf --save-dev

前端html转pdf的更多相关文章

  1. 前端vue实现pdf文件的在线预览

    3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

  2. layui.js---layer;;前端预览pdf

    layui.js---layer;;前端预览pdf 1.必须引入layui.js 2.uul是pdf文件地址 3.触发function函数:小于号button onclick="pdfsee ...

  3. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  4. 前端 / JavaScript 导出PDF的实践

    1.库:jspdf,自己定义一个高宽,如A4的210mm×297mm 2.让设计给背景图(包括:页眉页脚),水印图(背景透明,高宽和你的PDF单页一致)以及很多,能设计给的设计要给,因为在pdf上,排 ...

  5. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  6. java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）

    背景 之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...

  7. 前端导出pdf

    html2canvas文档地址 http://html2canvas.hertzen.com/configuration 方式一:使用html2canvas和jspdf插件实现 该方式是通过html2 ...

  8. 前端实现html转pdf方法总结

    最近要搞前端html转pdf的功能.折腾了两天,略有所收,踩了一些坑,所以做些记录,为后来的兄弟做些提示,也算是回馈社区.经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式,各有各 ...

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

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

随机推荐

  1. 设计-Int(4)和Int(11)谁更美

    设计-Int(4)和Int(11)谁更美 [缘起] 大家平时在进行数据库设计的时候,如果遇到需要存储整数类型的数据的时候,通常会优先使用Int这个整数类型,在处理20亿级别的正负数值存储上,Int类型 ...

  2. 123457---com.twoapp.shuXueYouXi---小学数学口算

    com.twoapp.shuXueYouXi---小学数学口算

  3. python 中 dict 的另一种用法

    python 中 dic另一种用法 描述 Python 字典(Dictionary) get() 函数返回指定键的值,如果值不在字典中返回默认值. 语法 dict={} dict.get(k1,Non ...

  4. Spring Boot中在程序中获得application.properties中的值

    方法是使用@Value注解的方式注解一个值. 首先,在我们的application.properties中添加一个值如下: zifeiy.tmpfile.location=D:/duty 然后在我们的 ...

  5. 【Leetcode_easy】599. Minimum Index Sum of Two Lists

    problem 599. Minimum Index Sum of Two Lists 题意:给出两个字符串数组,找到坐标位置之和最小的相同的字符串. 计算两个的坐标之和,如果与最小坐标和sum相同, ...

  6. 【c# 学习笔记】多态

    由于可以继承基类的所有成员,子类就都有了相同的行为,但是有时子类的某些行为需要相互区别,子类需要覆写父类中的方法来实现子类特有的行为,这样 的技术在面向对象的编程中就是多态. 多态即相同类型的对象调用 ...

  7. 斑马打印机ZBL语言

    ZBL手册:https://pan.baidu.com/s/1I8DaMUlf-9ytUwqtURw8rw 下面是打印CODE128条形码的代码 ^XA^FO100,100^BY6          ...

  8. 最新 海看java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.海看等10家互联网公司的校招Offer,因为某些自身原因最终选择了海看.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. Shiro认证、角色、权限

    Apache Shiro 是 Java 的一个安全框架.Shiro 可以帮助我们完成:认证.授权.加密.会话管理.与 Web 集成.缓存等. Shiro的内置Realm:IniRealm和JdbcRe ...

  10. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验三《敏捷开发与XP实践》 实验报告

    实验内容与要求 1.XP基础 极限编程(Extreme Programming,XP)是一种全新而快捷的软件开发方法.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: XP是 ...