Хранение элемента документа из jspdf в веб-хранилище HTML5 - PullRequest
Новая
       15

Хранение элемента документа из jspdf в веб-хранилище HTML5

0 голосов
/ 20 июня 2019

Можно ли сохранить документ, созданный из jspdf, в веб-хранилище HTML5?Я хочу сохранить его, чтобы продолжать добавлять материалы с других страниц, пока пользователь не нажмет кнопку загрузки.Приведенный ниже код не дает мне ошибок, но документ всегда состоит только из последней страницы. 

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');
}

Можно ли даже сохранить документ в хранилище или мне, возможно, придется преобразовать его в строку?

1 Ответ

0 голосов
/ 20 июня 2019

Вот как я это решил, если кому-то интересно.Я сохраняю все сгенерированные картинки из 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');
}
...