Javascript 在HTML5WebStorage中存储jspdf中的文档元素
是否可以将从jspdf创建的文档存储在HTML5 Web存储中?我想保存它,这样我就可以继续添加其他页面的内容,直到用户按下下载按钮。下面的代码没有错误,但文档始终只包含最后一页Javascript 在HTML5WebStorage中存储jspdf中的文档元素,javascript,html,jspdf,html2canvas,Javascript,Html,Jspdf,Html2canvas,是否可以将从jspdf创建的文档存储在HTML5 Web存储中?我想保存它,这样我就可以继续添加其他页面的内容,直到用户按下下载按钮。下面的代码没有错误,但文档始终只包含最后一页 let doc = new jsPDF('p', 'mm', 'a4'); const width = doc.internal.pageSize.getWidth(); const height = doc.internal.pageSize.getHeight(); window.sessionStorage.
let doc = new jsPDF('p', 'mm', 'a4');
const width = doc.internal.pageSize.getWidth();
const height = doc.internal.pageSize.getHeight();
window.sessionStorage.setItem('pdf', doc);
document.getElementById('report').onclick = function () {
doc = window.sessionStorage.getItem('pdf');
console.log(doc);
html2canvas(document.getElementById('dataTable'), {
onrendered: function (canvas) {
var table = canvas.toDataURL("image/png");
doc.addImage(table, 'JPEG', 0, 0, width, height);
window.sessionStorage.setItem('pdf', doc);
}
});
}
document.getElementById('download').onclick = function () {
doc = window.sessionStorage.getItem('pdf');
doc.save('test.pdf');
}
甚至可以将文档存储在存储区中吗?或者我可能需要将其转换为字符串吗?如果有人感兴趣,我将如何解决此问题。我将从html2canvas生成的所有图片作为dataURL保存在本地存储中。当我想要创建我的pdf时,我会检索它们并将它们全部添加到页面中。这很好,因为我从未达到本地存储的限制
Storage.prototype.setObject = function (key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function (key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
/*
* Save all pictures in local storage
*/
document.getElementById('report').onclick = function () {
html2canvas(document.body, {
onrendered: function (canvas) {
const image = canvas.toDataURL("image/png");
window.sessionStorage.setObject(new Date().getTime(), image);
}
});
}
document.getElementById('download').onclick = function () {
// Create new document
let doc = new jsPDF('p', 'mm', 'a4');
const width = doc.internal.pageSize.getWidth();
const height = doc.internal.pageSize.getHeight();
// Get all images from local storage and add them to the pdf
for (let key in sessionStorage) {
if (!isNaN(key)) {
const image = window.sessionStorage.getObject(key);
doc.addImage(image, 'JPEG', 0, 0, width, height);
}
}
// And download it
doc.save('test.pdf');
}
尝试将它们转换为字符串并返回,但无法重建对象。这将导致解决方案很快崩溃,因为localStorage/sessionStorage只允许少量数据(~5mb)。如果你需要“无论你需要多少”,你应该使用一个。我知道,它允许保存大约12页,在这种情况下就足够了。但你是对的,如果你想节省更多,你应该使用另一种解决方案。