转

<!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. C# 可扩展编程MEF学习

    http://www.cnblogs.com/yunfeifei/p/3991330.html

  2. 002-创建型-03-单例模式（Singleton）【7种】、spring单例及原理

    一.概述 保证一个类仅有一个实例,并提供一个全局访问点 私有构造器.线程安全.延迟加载.序列化和反序列化安全.反射攻击 1.1.适用场景 1.在多个线程之间,比如servlet环境,共享同一个资源或者 ...

  3. 编译安装MySQL5.6

    安装必需的工具  比如cmake.gcc.g++.git CentOS使用下面的命令: yum install cmake gcc g++ git Ubuntu使用下面的命令: apt-get ins ...

  4. logging日志管理

    日志:记录系统运行时的信息的(调试信息和异常信息) 基本用法: import logging logging.debug("这是一条调试信息") logging.info(&quo ...

  5. 安装git和关联gitlab拉取代码步骤

    1.双击 “Git-2.9.2-64-bit.exe”文件,一路next安装git程序 2.为github帐号添加SSH keys 3.使用git clone命令从GitLab上同步代码库时,如果使用 ...

  6. 我的iOS动画01

    1.嵌套使用,先变大再消失 [UIView animateWithDuration:1.25 aniamtions:^{ CGAffineTransform newTRansform = CGAffi ...

  7. Java API操作Hadoop可能会遇到的问题以及解决办法

    https://www.zifangsky.cn/1292.html Could not locate Hadoop executable: xxx\bin\winutils.exe   1 2 3 ...

  8. 通过命令行给 XenServer 打补丁

    安装 XenCenter 客户端,cmd 到 XenCenter 安装目录. 1.上传补丁到服务器,获得uuid xe patch-upload -s <服务器IP地址> -u root ...

  9. mybatis 找不到映射器xml文件 （idea）

    原因是: idea不会编译src的java目录的xml文件 所以解决思路就是:将IDEA maven项目中src源代码下的xml等资源文件编译进classes文件夹 具体操作方法就是:配置maven的 ...

  10. mysql 查询结果为null 或 空字符串时，返回指定字符串

    直接上代码, 亲测可用: SELECT IF ( ifnull( 字段, '' ) = '', '返回的字符串', 字段) AS 别名(或者不要也可以) FROM table