转

<!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. 简易的CRM系统案例之SpringMVC+JSP+MySQL+myBatis框架版本

    主要对上一版DAO框架的替换hibernate变成myBatis 简易的CRM系统案例之SpringMVC+JSP+MySQL+hibernate框架版本 src/mybatis.xml <?x ...

  2. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_16-课程预览功能开发-接口测试

    cms和课程的微服务重启 从数据库内找一条数据 进入到了断点 拼装课程信息 ,然后进行远程调用 抛出异常 可能是开了两个cms服务的事,负载均衡 到了另外一个服务里面 ,关掉一个 把02关掉,重启cm ...

  3. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_03-用户认证-认证服务查询数据库-查询用户接口-接口定义

    1.2.4 查询用户接口 完成用户中心根据账号查询用户信息接口功能. 在ucenter这个服务里面定义查询用户信息的接口 这个接口在auth的服务的loadUserByUserName这个方法里面被调 ...

  4. sonarqube-jenkins-config

    Sonar Config .Jenkinsfile config stage('SonarQube analysis') { steps { script { scannerHome = tool ' ...

  5. mysql导入、导出 ( 带视图）

    1创建账号授权 grant all privileges on jenkinsddbes.* to 'jenkinsddbes'@'%' identified by '1iN@Da12tA&* ...

  6. 单例模式-java

    /** * The MIT License * Copyright (c) 2014-2016 Ilkka Seppälä * <p> * Permission is hereby gra ...

  7. jQuery BlockUI Plugin Demo 6（Options）

    Options BlockUI's default options look (exactly) like this: // override these in your code to change ...

  8. iostat的坑

    简单使用iostat查询io使用量,会让你看不懂所以然,因为很多人疏忽了这个命令查到的结果根本不是实际值,需要注意的是一句话: “第1次采样信息与单独执行iostat的效果一样,为从系统开机到当前执行 ...

  9. 使用使用nltk 和 spacy进行命名实体提取/识别

    1. 什么是 命名实体提取? 参考:https://towardsdatascience.com/named-entity-recognition-with-nltk-and-spacy-8c4a7d ...

  10. 【转】Entity Framework简介

    Entity Framework Core 可基于现有数据库创建模型,也可基于模型创建数据库. 以下文字来源于:http://www.entityframeworktutorial.net/what- ...