之前上一篇隨筆說了Canvas截圖網頁為圖片，下來個新需求，把網頁截圖後儲存為PDF檔案供使用者下載。
使用canvas儲存網頁為pdf檔支援跨域
正文需求：使用者點選下載，將頁面儲存為PDF檔案並下載。
想法：繼續使用Canvas截圖後將畫布內容轉換為pdf檔。
首先我們要引進js檔jspdf.debug.js 下載路徑https://github.com/MrRio/jsPDF
引入canvas的js文件，js檔案取得地址官網主頁：http://html2canvas.hertzen.com/
<script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>
div按鈕程式碼
<div id=down_pdf>匯出為PDF按鈕</div> <div class=sta-main>需要取得為PDF的div</div>
jsp程式碼
<script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var canvas2 = document .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //取得寬高var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //將canvas畫布放大2倍，然後盛裝在小的容器內，處理模糊canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + px; canvas2.style.height = h + px; var context = canvas2.getContext(2d); //處理偏移context.scale(1.5, 1.5 ); //修改背景顏色，預設是黑色$('.sta-main').css(background, #fff) html2canvas( _canvas, { //處理pdf跨域取得不到跨域資訊問題taintTest : false, useCORS : true, allowTaint : false, canvas : canvas2, 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('PDF的名字.pdf'); } }) $(' .sta-main').css(background, )})</script>此網頁改為PDF，與上次截圖網頁為PNG，使用同一種技術，都是先使用Canvas截圖畫布後轉格式。
同樣也有偏移、模糊、跨域等問題，使用先前的程式碼來處理。
轉換pdf會讓背景色變成黑色使用css樣式改一下背景色就可以了。
完美轉換為pdf。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。