1,先看html的，直接上代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #demo{ background-color: yellow; width: 1000px; height: 2000px; /* 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(){ window.scrollTo(0,0); //解決有滾動條的情況圖片或者pdf展示不完全 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); console.log(pageData); 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>
2，vue項目中使用
①先安裝依賴
第一個.將頁面html轉換成圖片 npm install --save html2canvas 第二個.將圖片生成pdf npm install jspdf --save
②定義工具文件
/* eslint-disable */ //不使用JQuery版的 import html2canvas from 'html2canvas'; import JsPDF from 'jspdf'; /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName PDF文件生成后的文件名字 * */ function downloadPDF(ele, pdfName) { window.scrollTo(0, 0); let eleW = ele.offsetWidth;// 獲得該容器的寬 let eleH = ele.offsetHeight;// 獲得該容器的高 let eleOffsetTop = ele.offsetTop; // 獲得該容器到文檔頂部的距離 let eleOffsetLeft = ele.offsetLeft; // 獲得該容器到文檔最左的距離 var canvas = document.createElement("canvas"); var abs = 0; let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 獲得當前可視窗口的寬度（不包含滾動條） let win_out = window.innerWidth; // 獲得當前窗口的寬度（包含滾動條） if (win_out > win_in) { // abs = (win_o - win_i)/2; // 獲得滾動條長度的一半 abs = (win_out - win_in) / 2; // 獲得滾動條寬度的一半 // console.log(a, '新abs'); } canvas.width = eleW * 2; // 將畫布寬&&高放大兩倍 canvas.height = eleH * 2; var context = canvas.getContext("2d"); context.scale(2, 2); context.translate(-eleOffsetLeft - abs, -eleOffsetTop); // 這里默認橫向沒有滾動條的情況，因為offset.left(),有無滾動條的時候存在差值，因此 // translate的時候，要把這個差值去掉 // html2canvas(element).then( (canvas)=>{ //報錯 // html2canvas(element[0]).then( (canvas)=>{ html2canvas(ele, { dpi: 300, // allowTaint: true, //允許 canvas 污染， allowTaint參數要去掉，否則是無法通過toDataURL導出canvas數據的 useCORS: true //允許canvas畫布內 可以跨域請求外部鏈接圖片, 允許跨域請求。 }).then((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 = 595.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', 左，上，寬度，高度)設置在pdf中顯示； pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName); }) } async function previewImg(ele) { // 返回圖片base64格式 window.scrollTo(0, 0); let eleW = ele.offsetWidth;// 獲得該容器的寬 let eleH = ele.offsetHeight;// 獲得該容器的高 let eleOffsetTop = ele.offsetTop; // 獲得該容器到文檔頂部的距離 let eleOffsetLeft = ele.offsetLeft; // 獲得該容器到文檔最左的距離 var canvas = document.createElement("canvas"); var abs = 0; let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 獲得當前可視窗口的寬度（不包含滾動條） let win_out = window.innerWidth; // 獲得當前窗口的寬度（包含滾動條） if (win_out > win_in) { abs = (win_out - win_in) / 2; // 獲得滾動條寬度的一半 } canvas.width = eleW * 2; canvas.height = eleH * 2; var context = canvas.getContext("2d"); context.scale(2, 2); context.translate(-eleOffsetLeft - abs, -eleOffsetTop); var baseSrc = '' await html2canvas(ele, { //等待函數執行完成 dpi: 300, useCORS: true //允許canvas畫布內 可以跨域請求外部鏈接圖片, 允許跨域請求。 }).then((canvas) => { var pageData = canvas.toDataURL('image/jpeg', 1.0); baseSrc = pageData }) return baseSrc; } export default { downloadPDF, previewImg }
③在項目中使用
<div style="padding: 10px;">
<el-button type="primary" @click="handlePreview()">預覽</el-button>
<el-button type="primary" @click="handleDown()">下載</el-button>
</div>
import htmlToPdf from '@/assets/js/toPdf'
export default {
methods: {
handleDown () {
htmlToPdf.downloadPDF(document.querySelector('#demo'), '離職申請表')
},
handlePreview () {
htmlToPdf.previewImg(document.querySelector('#demo')).then( res => {
this.previewUrl = res
})
}
}
}