1：引入Js指令碼檔案（這裡不提供下載路勁，各位自己找吧）

<script type="text/javascript" src="/js/pdf/jspdf.debug.js" th:src="@{/js/pdf/jspdf.debug.js}"></script>
<script type="text/javascript" src="/js/pdf/html2canvas.js" th:src="@{/js/pdf/html2canvas.js}"></script>

2：下載方法

//匯出pdf
function exportPdf(id,name) {
    layer.open({type:3,icon:2});//mask遮罩層開啟，沒有使用layui的可以去掉
    html2canvas($("#"+id), {
        allowTaint: true,//允許跨域，具體啥意思不清楚
        height: document.getElementById(id).scrollHeight,//
        width: document.getElementById(id).scrollWidth,//為了使橫向滾動條的內容全部展示，這裡必須指定
        background: "#FFFFFF",//如果指定的div沒有設定背景色會預設成黑色,這裡是個坑
        onrendered:function(canvas) {

            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //一頁pdf顯示html頁面生成的canvas高度;
            var pageHeight = contentWidth / 595.28 * 841.89;
            //未生成pdf的html頁面高度
            var leftHeight = contentHeight;
            //pdf頁面偏移
            var position = 0;
            //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
            var imgWidth = 555.28;
            var imgHeight = 555.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', 20, 0, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免新增空白頁
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            layer.close(layer.index);//關閉遮罩層
            pdf.save(name+'.pdf');
        }
    })
};
 

3：效果圖

（1）頁面內容(橫向有滾動條)

(2)匯出的PDF樣式（滾動條的內容全部展示）

4：結束語

網上有很多相關教程，分頁都能很好支援但是橫向滾動條的內容只能展示可見區域的內容，導致匯出的內容不全。只需要簡單的指定下寬度就可以完整的輸出，希望能幫助到各位。特別要指出，匯出的時候中文沒有亂碼，但是瀏覽器的相容沒有測試，在firefox上是正常顯示