html2canvas + jsPDF 匯出PDF，解決一半文字在上一頁一半文字在下一頁的問題
html頁面轉pdf下載
兩個js檔案可供使用，地址如下：
唯一的缺點是圖片跨頁不好解決，最終的pdf檔案如下：
解決下載pdf檔案背景是黑色的問題，將div新增背景色為白色，未解決圖片跨頁問題，解決思路：
- 通過控制頁面html頁面元素，控制元素位置，當處於高度重疊的元素，調整該元素相對位置
- 轉成圖片而非pdf，將是一整頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#demo{
background-color: #fff;
width: 400px;
height: 400px;
/* margin: auto; */
}
.red{
background-color: red;
width: 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>
作者：少帥
出處：少帥的部落格--http://www.cnblogs.com/wang3680
您的支援是對博主最大的鼓勵，感謝您的認真閱讀。
本文版權歸作者所有，歡迎轉載，但請保留該宣告。
支付寶 微信