我必須從一個網路應用程式列印一個比普通 A4 頁面長的網頁（所以基本上我需要創建一個 pdf，在多個 pdf 頁面中顯示我的所有網頁）。目前我正在使用 html2canvas jsPDF；在 chrome 上它們作業正常。問題是我還需要他們在 IE11 和可能的 IE9 上作業（我已經通過使用 polyfill 解決了“承諾”問題）。
在 IE 上，該功能確實列印檔案，但僅列印網頁的第一部分（用戶無需向下滾動即可看到的內容）。
這是代碼：
<script src="${pageContext.request.contextPath}/jsp/shared/silef2/lib/jsPDF/polyfills.es.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jsp/shared/silef2/lib/jsPDF/jspdf.es.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jsp/shared/silef2/js/html2canvas.js" type="text/javascript"></script>
<script>
function functionPrint() {
html2canvas(document.getElementsByTagName("html"),{
onrendered:function(canvas){
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');
}
});
}
</script>
<button onclick="functionPrint();">STAMPA</button>
不幸的是，控制臺沒有給我任何錯誤。我想jsPDF和IE之間存在某種不兼容。
uj5u.com熱心網友回復：
我發現 IE11 默認具有“溢位：隱藏”屬性，因此，在列印之前，您需要像這樣手動覆寫該屬性：
<script>
function functionPrint() {
document.getElementById("main").parentNode.style.overflow = 'visible'; <-- THIS
html2canvas(document.getElementsByTagName("html"),{
onrendered:function(canvas){
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');
}
});
}
</script>
它僅適用于getElementById因此您需要準確確定構成整個頁面的元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/415847.html
標籤：
上一篇：為什么更改InternetExplorer（版本11及更低版本）中的innerText會永久破壞所有后代文本節點？