Проблемы с созданием хорошего качества pdf из библиотек javascript: jspdf и html2canvas

Question

Ну, я работаю над утилитой, которая создает выход в формате PDF. Данные извлекаются от пользователя и после того, как некоторые манипуляции преобразуются в заранее определенный формат, который затем требуется в формате .pdf, при этом все css не повреждены.

Его полностью клиентское приложение.

Я использую для этого jsPdf + html2canvas. Но у меня есть следующие проблемы:

1. Прежде всего, не удалось найти для них документацию по API. Я все еще работаю с кусочками кодов, найденных на разных сайтах.
2. Независимо от того, что я достиг, качество вывода далеко не ожидалось.
3. Когда мой документ HTML достаточно велик, чтобы занять несколько страниц, я по-прежнему получаю pdf только первую страницу. (Это, по-моему, связано с моей нехваткой знаний, опять же из-за отсутствия документации.)

Я видел, есть много подобных вопросов. Я пробовал почти все из них, мало кто не работает, мало что вызывает некоторые ошибки, и я все еще застрял.

Так мои запросы:

1. Является ли мой выбор, подходит для получения хорошего качества в формате PDF (по крайней мере 80% -90%, как это видно на экране). Будет действительно признателен, если кто-то сможет направить меня на качественные выходные фрагменты jspdf и html2canvas.

2. Просьба ознакомиться с соответствующей документацией по этим библиотекам. В настоящее время у меня есть папка doc в файле zip файла в github, что, безусловно, недостаточно, чтобы разобраться в нем.

3. Если этот подход невозможен, обратитесь к лучшему продукту. Качество - это первоклассное требование для нас, производительность может быть достигнута. Готовы к оплате библиотек. Но предпочитают инструменты на стороне клиента (так как буквально не требуется реализация на стороне сервера).

Я отправил вопрос к выше запросов, но только в том случае необходимости, мой код:

function previewCtrlFn($scope, Database){ 
     var vm = this; 
     vm.resume = Database.resume; 
     console.log(angular.toJson(vm.resume)); 
     vm.pdf = createPDF; 

     var form = $('#aa'), 
      width = form.width(), 
      a4 =[ 615.28, 841.89]; 

     function createPDF(){ 
     getCanvas().then(function(canvas){ 
      var 
      img = canvas.toDataURL("image/png"), 
      doc = new jsPDF({ 
        unit:'px', 
        format:'a4' 
       });  
     doc.addImage(img, 'JPEG', 5, 5); 
     doc.save('resume.pdf'); 
     form.width(width); 
     }); 
     } 

     // create canvas object 
     function getCanvas(){ 
     form.width((a4[0]*1.33333) -80).css('max-width','none'); 
     return html2canvas(form,{ 
      imageTimeout:1000, 
      removeContainer:true 
      }); 
     } 
    } 

мне действительно нужна быстрая помощь по этому вопросу.

Answer 1

вы можете использовать этот код, ваш размер PDF и качество улучшит

html2canvas(body,{ 
    onrendered:function(canvas){ 
     var img=canvas.toDataURL("image/png"); 
     console.dir(canvas); 
     var pdf=new jsPDF("p", "mm", "a4"); 
     var width = pdf.internal.pageSize.width;  
     var height = pdf.internal.pageSize.height; 
     pdf.addImage(canvas, 'JPEG', 0, 0,width,height); 
     pdf.save('test11.pdf'); 
    } 
})