html2canvas + jsPDF 导出PDF,解决一半文字在上一页一半文字在下一页的问题

摘要:
htmllang=“en”>*/}。红色{背景色;高度;}<divclass=“演示容器”>divclass=“red”>按钮>scriptsrc=“https;<&varcontentHeight=canvas.height;

html页面转pdf下载

两个js文件可供使用,地址如下:

https://github.com/linwalker/render-html-to-pdf

唯一的缺点是图片跨页不好解决,最终的pdf文件如下:

image

 

解决下载pdf文件背景是黑色的问题,将div添加背景色为白色,未解决图片跨页问题,解决思路:

  1. 通过控制页面html页面元素,控制元素位置,当处于高度重叠的元素,调整该元素相对位置
  2. 转成图片而非pdf,将是一整页

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#demo{

background-color: #fff;

400px;

height: 400px;

/* margin: auto; */

}

.red{

background-color: red;

50px;

height: 50px;

}

</style>

</head>

<body>

<div class="demo-container">

<div id="demo">

<div class="red"></div>

</div>

</div>

<button>

下载简历

</button>

</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

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

<script>

function download(){

var element = $("#demo"); // 这个dom元素是要导出pdf的div容器

var w = element.width(); // 获得该容器的宽

var h = element.height(); // 获得该容器的高

var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离

var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离

var canvas = document.createElement("canvas");

var abs = 0;

var win_i = $(window).width(); // 获得当前可视窗口的宽度(不包含滚动条)

var win_o = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)

if(win_o>win_i){

abs = (win_o - win_i)/2; // 获得滚动条长度的一半

}

canvas.width = w * 2; // 将画布宽&&高放大两倍

canvas.height = h * 2;

var context = canvas.getContext("2d");

context.scale(2, 2);

context.translate(-offsetLeft-abs,-offsetTop);

// 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此

// translate的时候,要把这个差值去掉

html2canvas(element).then(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;

//页面偏移

var position = 0;

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

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('我的简历.pdf');

})

}

$("button").click(function(){

download();

})

</script>

</html>

免责声明:文章转载自《html2canvas + jsPDF 导出PDF,解决一半文字在上一页一半文字在下一页的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇WebUploader.js 上传的几种情况微信小程序setdata修改数组或对象下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

maven部署命令

参考文档:http://blog.csdn.net/woshixuye/article/details/8133050 http://www.blogjava.net/itvincent/archive/2011/07/13/354243.html maven部署源代码的插件配置(在pom.xml文件中) <build> <plugins...

Pechkin使用心得(二)

完成Pechkin使用心得(一)的内容后。下面正式进入代码实现的阶段。 在项目中引用Pechkin.dll与Pechkin.Synchronized.dll后编写以下示例代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Dat...

tk.mybatis 报错:tk.mybatis.mapper.MapperException: tk.mybatis.mapper.MapperException: java.lang.StringIndexOutOfBoundsException: String index out of range: -1

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'apiLogMapper' defined in file : Invocation of init method failed; nested exception is tk.my...

js实现照片墙效果

本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置。 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库:underscore.js,因为图片的数量是不固定的,这里我们采用动态添加的方式生成li,再在li里面添加图片。 <!DOCTYPE html>...

cnetos7.3离线安装vscode

1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) #下载vscode包 访问Visual Studio Code官网 https://code.visualstudio.com/docs?dv=linux64 或者:wget https://az764295.vo.msecnd.net/stable/7ba55c58...

WPF使用Winform PDFView控件

最近开发wpf项目中有一个模块需要显示PDF文件内容。由于WPF本身没有PDF加载控件(似乎有收费的我查到过类似的资料。如果有新的pdf控件也请通知我一下谢谢)。 项目使用之前也是从网上获取的资料,因此接下来的控件命名和项目命名完全沿用原文档。具体地址忘记了。这样也好感谢原作者。 不过里面的逻辑根据项目实际应用做了变工 。每人理解不同为了大家更快更好地的使...