jsPDF損壞的PDF文件？

我正在嘗試使用jsPDF使用JavaScript創建PDF文件。我有一個測試頁面。基本上我有一個下載PDF按鈕，它從一個跨度獲取base64映像，並將其用於imgData。然後我嘗試將addImage圖像數據寫入pdf，然後保存。一切似乎都奏效，它會生成PDF並提示下載。但是，當我嘗試使用xpdf或Foxit閱讀器查看PDF時，我被告知PDF已損壞。 我是不是創建此PDF不正確？我的網頁很長，所以我把它放在Pastebin上。jsPDF損壞的PDF文件？

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script> 
<script type="text/javascript" src="../jspdf.js"></script> 
<script type="text/javascript" src="../libs/FileSaver.js/FileSaver.js"></script> 
<script type="text/javascript" src="../libs/BlobBuilder.js/BlobBuilder.js"></script> 
<script type="text/javascript" src="../jspdf.plugin.addimage.js"></script> 
<script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script> 
<script type="text/javascript" src="../jspdf.plugin.from_html.js"></script> 
<script type="text/javascript" src="js/basic.js"></script> 
<title>Sup!</title> 
<script> 
function changeCan() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle="#FF0000"; 
    ctx.fillRect(0,0,128,128); 
} 
function changeCan3() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle="#FFFFFF"; 
    ctx.fillRect(0,0,128,128); 
    var image = new Image(); 
    image.src = document.getElementById("3span").innerHTML; 
    ctx.drawImage(image,0,0); 
} 
function changeCan4() { 
    var imgData = document.getElementById("3span").innerHTML; 
    window.alert(imgData.length); 
    var doc = new jsPDF(); 
    doc.addImage(imgData, 'JPEG', 15, 40, 128, 128); 
    doc.save('Test.pdf'); 
} 
</script> 
</head> 
<body> 
    Yo!<hr> 
    <canvas id="myCanvas" width="128" height="128"></canvas><hr> 
    <button type="button" onClick="changeCan()">Change Me To Red!</button> 
    <button type="button" onClick="changeCan3()">Change Me To Span!</button> 
    <button type="button" onClick="changeCan4()">Download Me!</button> 
    <hr> 
    <span id="3span" style="display:none;">B64 DATA HERE</span> 
</body> 
</html>

來源

2013-01-21 0xhughes

在你的'3span' DIV，的innerHTML包含'數據：圖像/ JPEG; BASE64，'。它是必需的嗎？只是一個想法，我不知道這個jsPDF庫，但我很感興趣，我將很快需要這個:) – JScoobyCed

那麼'data：image/jpeg; base64，'部分似乎對測試頁的不同部分來說是必須的我在鬼混，這是改變帆布笑人的圖形。同樣在jsPDF網頁http://jspdf.com/上，如果您願意的話，貓圖像的例子顯示'data：image/jpeg; base64，'「header」。 @JScoobyCed所以我不完全確定是否需要它，我可以嘗試快速刪除它並生成另一個PDF！ – 0xhughes

@JScoobyCed我快速刪除了base64數據中的大量信息，並且畫布和PDF都出錯了。我不太擔心畫布，只是爲了笑。 PDF雖然沒有工作，但這是錯誤的FireBug吐，'getJpegSize無法找到圖像的大小 [Break On This Error]拋出新的錯誤（'getJpegSize找不到圖像的大小'）; 「我從他的庫中查看了.js文件中的代碼，我無法確切地知道它在做什麼。抓住某些字符，變得長久，並用這些信息做一些數學運算。 – 0xhughes

我有類似的問題，這是如何解決它。我用Blob.js，canvas-toBlob,FileSaver。我還注意到最新的BlobBuilder.min.js不能正確工作，所以我改用BlobBuilder.js。

var content = canvas.toDataURL('image/jpeg'); 
var doc = new jsPDF('landscape'); 
doc.addImage(content, 'JPEG', 0, 0); 

var data = doc.output(); 
var buffer = new ArrayBuffer(data.length); 
var array = new Uint8Array(buffer); 

for (var i = 0; i < data.length; i++) { 
    array[i] = data.charCodeAt(i); 
} 

var blob = new Blob(
    [array], 
    {type: 'application/pdf', encoding: 'raw'} 
); 

saveAs(blob, filename);

來源

2013-02-06 13:08:19 mtasic85

非常簡潔，下班後我會給你一個測試！但有一個問題，一開始你從畫布上抓取內容，在我的場景中，圖片加載來自本地機器。（一個腳本爲它生成網頁和圖像數據）。如果我已經在一個範圍內定義了DataURL，我可以簡單地去「var content = getElementByID（」SPANID「）。innerHtml」？內部html是腳本生成的toDataURL ASCII。非常感謝您的回答，我一定會研究您的方法，看看它是如何消除的！ – 0xhughes

我正在測試你的解決方案，但我得到了一個像** name.pdf-1.part這樣的pdf，有沒有一種方法可以讓我得到** name.pdf **？ – Jeff

我還沒有找到擺脫.part擴展名的方法。我認爲我的FireFox版本（12）與jsPDF完全不兼容。我將我的FireFox升級到18.0.2版本，並且我的原始腳本工作，但它仍然有.part擴展名。我不確定它爲什麼這樣做。一定是圖書館方面的事情。這是不幸的，因爲我希望能夠爲我的網頁提供一些跨瀏覽器兼容性。我可能必須設置我的客戶端才能使用最新的FireFox。在jsPDF github上提交了一些問題。也許我們會得到一個很好的更新！ – 0xhughes

我不得不使用PNG圖像類型相似的問題：當使用Adobe Reader打開PDF已損壞。

更改爲jpeg解決了它！

// Before : Corrupted PDF file when opened with Adobe Reader 
var imgData = canvas.toDataURL('image/png'); 
var doc = new jsPDF('p', 'mm'); 
doc.addImage(imgData, 'png', 0, 0, 210, 295); 

// After : Working 
var imgData = canvas.toDataURL('image/jpeg'); 
var doc = new jsPDF('p', 'mm'); 
doc.addImage(imgData, 'jpeg', 0, 0, 210, 295);

來源

2017-01-10 13:39:29

我用的是1.3.4版本jsPDF的，它的工作

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

來源

2017-05-04 12:57:32 Dom

jsPDF損壞的PDF文件？

回答

相關問題