我有一個非常簡單的 svg
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
并嘗試用 html2canvas 和 jspdf 列印它。但無論我做什么我都會出錯
Error loading svg data:image/svg xml,%3Csvg xmlns%3D"http%3A%2F/www.w3.org/2000%2Fsvg" height%3D"100" width%3D"100" style%3D"-webkit-writing-mode%3A horizontal-tb%3B -webkit-user-modify%3A read-only%3B -webkit-user-drag%3A auto%3B -web
Oe.error @ html2canvas-1.1.2.min.js:20
并在test.pdf其中僅包含單詞的檔案test。
我在谷歌上搜索了大約 3 個小時，并且在每個地方人們都推薦設定width/height屬性。正如您所看到的，這對我的情況沒有幫助。我已經盡可能地簡化了它。這是我使用的完整 index.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<script src="../../../script/jsPDF/jspdf-2.3.1.umd.min.js" defer></script>
<script src="../../../script/jsPDF/html2canvas-1.1.2.min.js" defer></script>
<script>
function saveAsPDF(divId, usersName, certNumber = '', type = 'old')
{
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
var source = document.getElementById("printId");
pdf.html(
source, {
callback: function (pdf) {
pdf.save("test.pdf");
},
});
}
</script>
<input type='submit'
onclick='saveAsPDF();'
value='save'>
</body>
</html>
我還嘗試了所有可能的 html2canvas 版本：
1.1.2
1.1.5
1.2.2
1.3.2
和兩個版本的jspdf：
2.1.1
2.3.1
還有兩個瀏覽器：Chrome 和 Opera。
我的問題是什么？
編輯：我設法使用下面的檔案使 html2canvas 獨立作業。現在的問題是如何讓它與 jspdf 一起作業：
<html>
<head></head>
<body>
<div id="printId">
this is circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<hr>
<h4>Image of above HTML content...</h4>
<div id="canvasImg"></div>
<script src="../../../script/jsPDF/html2canvas-1.3.2.min.js"></script>
<script>
html2canvas(document.getElementById('printId')).then(function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
document.getElementById('canvasImg').innerHTML = '<img src="' canvasImg '" alt="使用 html2canvas 和 jspdf 加載 svg 資料時出錯">';
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
看起來 jspdf 無法將 svg 作為矢量圖形添加到頁面。共有三個選項：
- 使用svg2pdf而不是 jspdf 自行將 svg 轉換為 pdf。
- 使用jspdf的addSvgAsImage函式手動在pdf頁面中放置一個svg。
- 先將svg轉為jpg，再使用jspdf。
我選擇了第三個選項并撰寫了一個函式，在將畫布另存為 pdf 之前運行該函式：
htmlToJpg: function()
{
var canvas = document.querySelector('.to-print');
screenWidth = parseFloat(window.getComputedStyle(canvas).width);
var problematic = document.querySelectorAll('.convert-to-jpg');
problematic.forEach(function(el) {
html2canvas(el,
{
scale: 2480/screenWidth // 2480px - size for A4 paper, 300 dpi
}
)
.then(function(canvas) {
var img = canvas.toDataURL("image/jpeg");
el.innerHTML = '<img src="' img '" >';
});
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312329.html
標籤：javascript html svg 印刷