為什么80%的碼農都做不了架構師？>>> ??

引入js（這里可以自己去官網下載jspdf? https://parall.ax/products/jspdf）

<script type="text/javascript" src="${ctx }/staticfile/jsPDF/html2canvas_back.js"></script> <script type="text/javascript" src="${ctx }/staticfile/jsPDF/dist/jspdf.debug.js"></script>

? ? ?2.調用方法（這里給大家封裝好了）：? ?

/*轉pdf*/ function toPDF(){html2canvas(document.body, {useCORS:true,onrendered:function(canvas) {//這是文件名var fileName = "${submitExperimentFile.studentSubmitter.majorName}${submitExperimentFile.studentSubmitter.className}-${submitExperimentFile.studentSubmitter.username}${submitExperimentFile.studentSubmitter.name}"+"《${submitExperimentFile.experiment.experimentName}》";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(fileName+'.pdf');}}) }

? ?3.全頁面截圖：這里給大家一個修改好的js（或者下載我的直接用，親測可用）：

? ? 4.關于圖片跨域的問題，可以用一下步驟解決：

• ? ? ? （1） 將頁面中的圖片全部加上crossorigin = anonymous

$("img").each(function(index){$(this).attr("crossorigin","anonymous");});

• ??????（2）訪問的服務器打開允許跨域訪問，如果你是Tomcat可以這樣配置：在Tomcat 的conf目錄下的web.xml 加入以下代碼：
  • <filter><filter-name>CorsFilter</filter-name><filter-class>com.vcooc.experiment.filter.CORSFilter</filter-class> </filter><filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern> </filter-mapping>

    ?這樣轉成的pdf就能解決圖片跨域問題

?

轉載于:https://my.oschina.net/linwl/blog/1600847

總結

以上是生活随笔為你收集整理的JSPDF运用实例（解决图片跨域问题）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。