Импорт длинного html в разделенный PDF

Мой сценарий:

При нажатии кнопки импортируйте данные в формате html в файл PDF.

Поскольку этот PDF-файл должен иметь какой-то сложный требуемый стиль, поэтому мой первый шаг — преобразовать эту страницу в изображение с помощью html2canvas.js, а затем импортировать это изображение в PDF-файл с помощью jsPDF.js.

И когда данные слишком велики, PDF-файл должен быть разделен для хранения всех данных, поэтому я использовал коды здесь: https://github.com/MrRio/jsPDF/pull/397

Моя проблема: в Firefox разделенная страница в PDF на странице 2 или 3 ... не может быть показана, они полностью пусты. а на 1 странице нормально. (это для фаерфокса)

Пробовал другие браузеры, все нормально. Пожалуйста, кто-нибудь может пролить свет на то, как это исправить?

Вот мой plnkr: http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p=preview

function initTemplate(){
      datas=getData();
      var templateData=_.template($('#tpl').html(), datas);
      $('#tplW').html(templateData);
      getPDF();
      //  $('#tplW').append(_.template($('#tpl').html(), datas));
      // $('body').html( _.template($('#tpl').html(), datas));

 }


   function getData(){
      var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");
         var datas=[];
         $.each(htmlData,function(i,v){
             var d=[];
             var tds=$(v).find("td");
             $.each(tds,function(index,val){
                 d.push($(val).text());
             });
              datas.push(d); 
         });
       return datas;
   }



function getPDF() {
    // initTemplate();
         html2canvas($('#tplW')[0], {
        onrendered: function(canvas){

            canvasToImageSuccess(canvas);
        }
    });



    function canvasToImage (canvas){
        var img = new Image();
        var dataURL = canvas.toDataURL('image/png');
        img.src = dataURL;
        return img;
    };


    function canvasShiftImage (oldCanvas,shiftAmt){
        shiftAmt = parseInt(shiftAmt) || 0;
        if(!shiftAmt){ return oldCanvas; }
        var newCanvas = document.createElement('canvas');
        newCanvas.height = oldCanvas.height - shiftAmt;
        newCanvas.width = oldCanvas.width;
        var ctx = newCanvas.getContext('2d');
        var img = canvasToImage(oldCanvas);
        ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);
        return newCanvas;
    };



    function canvasToImageSuccess (canvas){
       var pdf = new jsPDF('l','px'),
            pdfInternals = pdf.internal,
            pdfPageSize = pdfInternals.pageSize,
            pdfScaleFactor = pdfInternals.scaleFactor,
            pdfPageWidth = pdfPageSize.width,
            pdfPageHeight = pdfPageSize.height,
            totalPdfHeight = 0,
            htmlPageHeight = canvas.height,
            htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
            safetyNet = 0;
        while(totalPdfHeight < htmlPageHeight && safetyNet < 15){
            var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
            pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
            totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

            if(totalPdfHeight < htmlPageHeight){
                pdf.addPage();
            }
            safetyNet++;
        }
        pdf.save('test.pdf');
    };
}

javascript pdf jspdf html2canvas
person drizzt83s    schedule 23.10.2015    source источник
comment
Вы получили решение? Если это так, пожалуйста, опубликуйте то же самое.   -  person Roy M J    schedule 23.02.2016
comment
@RoyMJ Использование изображения в pdf даст PDF низкого качества, вместо этого вы можете использовать autoTable для jsPdf и экспортировать содержимое с верхним и нижним колонтитулом. Проверьте здесь simonbengtsson.github.io/jsPDF-AutoTable/#header-footer Он также будет генерировать высококачественный PDF-файл.   -  person Purushoth    schedule 28.02.2016
comment
@Purushoth: Спасибо за приведенную выше ссылку, но это не таблица, которую я хочу импортировать, а длинный html и плагины, похоже, имеют проблемы, когда дело доходит до длинного содержимого.   -  person Roy M J    schedule 28.02.2016
comment
Может ли это помочь? stackoverflow.com/questions/15570767/ : Это проблема со встроенным просмотрщиком Firefox. Вам нужно будет перейти в «Параметры» -> «Приложения» и изменить настройки «Файл PDF» или «Формат переносимого документа» на «Использовать Adobe Acrobat» (в Firefox).   -  person mico    schedule 01.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны использовать canvas-to-blob и FileSaver.js

и измените эту строку:

pdf.save('test.pdf');

к этому:

var data = pdf.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, "test.pdf");

Вы можете проверить это здесь.

Это работало для меня на Mac, Firefox.

Я нашел это решение здесь.

person Adam    schedule 01.03.2016
comment
Кроме того, есть идеи, как установить все четыре боковых поля? - person TechTurtle; 12.08.2016