转

<!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. lua 求table长度和判断空

    local table_a = {} 判断一:(错误方法)     if table_a == {} then         --你会发现你怎么也进不来 条件判断始终返回false,为什么会这样呢? ...

  2. python中关于shutdown 和closesocket的彻底理解！

    关于shutdown 和closesocket的彻底理解! shutdown 和closesocket 来,咱们彻底的来讨论一下这个shutdown 和closesocket 从函数调用上来分析(ms ...

  3. zblog文件大小超出，上传成功但插入不了

    在zblogphp时,经常会遇到需要上传2m以上的文件或图片,这个时候就需要修改默认上传文件的大小了.看了很多地方的文章都解决不了,后面在麒麟杰博客找到相关解决办法.   工具/原料   zblogp ...

  4. Carve ifc failed

    Detected IFC version: IFC2X3 Warning: Sweeper::createTriangulated3DFace, carve::triangulate::incorpo ...

  5. osg MatrixManipulator CameraManipulator

    <osgGA/MatrixManipulator>:No such file or directory 修改为 #include <osgGA/CameraManipulator&g ...

  6. 为什么每次登录要手动 source /etc/profile ...

    由于执行顺序如下,故追个查看以下文件,看看是不是 JAVA_HOME, PATH 等环境变量在后面的文件中被重写覆盖了. 1. /etc/profile2. /etc/environment3. ~/ ...

  7. Redis 数据类型String 使用

    字符串是Redis中最基本的数据类型,它能够存储任何类型的字符串,包含二进制数据.可以用于存储邮箱,JSON化的对象,甚至是一张图片,一个字符串允许存储的最大容量为512MB.字符串是其他四种类型的基 ...

  8. jquery获得 当前页面url的变量

    (function($){ $.extend({ urlGet:function () { var aQuery = window.location.href.split("?") ...

  9. Windows删除某服务

    win+R然后cmd进入命令窗口 sc delete 服务名

  10. 记：联调安卓设备的神药-无需usb数据线即可直连

    前言 最近需要调试公司的安卓服务,正常情况下,我们调试都是减安卓设备通过usb连接在我们座位旁,再不济就是我们扛笔记本到硬件旁边,这样调试屡试不爽,但是有一天你突然发现你带的数据线因为各种原因总是终端 ...