转

<!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. 【转载】 一文看懂深度学习新王者「AutoML」：是什么、怎么用、未来如何发展？

    原文地址: http://www.sohu.com/a/249973402_610300 原作:George Seif 夏乙 安妮 编译整理 ============================= ...

  2. java-mybaits-013-mybatis-Interceptor-拦截器执行顺序

    一.概述 已知拦截器能够拦截四种类型:Executor.ParameterHandler.ResultSetHandler.StatementHandler. 1.1.不同类型拦截器的执行顺序 背景: ...

  3. yml内容如何转map？

    yml内容如何转map   解决方法: Map map = null; Yaml yaml = new Yaml(); File ymlFile = new File("c:/src/tes ...

  4. OpenStack社区中的GO语言之争

    1 背景介绍 Swift之前几乎所有的代码都是用Python实现的,但是性能一直不理想, 社区为了解决性能问题,尝试过很多方法,后来发现用Golang语言进行一部分代码重写, 性能得到了一定的提升,社 ...

  5. SUBMIT标准程序取ALV数据

    示例1: 调用J3RFLVMOBVEDH ,取物料的期初/ 期末庫存数.金额 FORM frm_call_j3rflvmobvedh. DATA: lr_bukrs TYPE RANGE OF buk ...

  6. sql 获取本周周一和周日

    版本1.0(获取周日存在问题,请勿使用,仅用于引以为戒) 存在问题,获取周日的时候,当当前时间正好是周日,会获取下一周的周日,而非本周周日. ,)),) ),, ,)),) 版本2.0 看到版本1.0 ...

  7. （十六）集合框架（Collection和Map）和比较器（Comparable和comparator）

    一.集合框架 1.1 为什么要使用集合框架? 当我们需要保持一组一样(类型相同)的元素的时候,我们应该使用一个容器来保存,数组就是这样一个容器. 那么,数组的缺点是什么呢? 数组一旦定义,长度将不能再 ...

  8. PHP实现简单留言板

    最近学习了下PHP基础,这里做一个简单的留言板,算是对PHP和MySQL的使用做一个整体的练习吧,不遇到问题总感觉学不到东西. 截图如下: 总结: 1>数据库的简单操作,数据库的增删改查: 2. ...

  9. 接着上次的python爬虫，今天进阶一哈，局部解析爬取网页数据

    *解析网页数据的仓库 用Beatifulsoup基于lxml包lxml包基于html和xml的标记语言的解析包.可以去解析网页的内容,把我们想要的提取出来. 第一步.导入两个包,项目中必须包含beau ...

  10. canvas梦幻七彩泡泡

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...