PhoneGap / JSPDF проблема сохранения HTML в формате PDF

Question

PhoneGap / JSPDF проблема сохранения HTML в формате PDF

0

Я не массивный javascript/jquery пользователь, но я начал получать больше в нем для использования в мобильных приложениях... Я искал ответ, чтобы решить мою проблему получения пустой страницы при попытке вывода html как pdf, используя jspdf, и каждое сообщение, которое я нахожу, имеет какое-то отношение к blobs.

это мой код, который у меня есть, который экспортирует пустой pdf. Я оставил файл pdf.save, поэтому я получаю экспорт на своем ПК в качестве образца того, как он должен выглядеть, но на моем ipad и nexus 7 он сохраняет пустой pdf.

var pdf = new jsPDF('p', 'pt', 'letter'), source = $('#home')[0], specialElementHandlers = {
    '#bypassme': function(element, renderer){
        return true
    }
}
margins = {top: 80,bottom: 60,left: 40,width: 522};
pdf.fromHTML(source, margins.left, margins.top, {
    'width': margins.width // max width of content on PDF
    , 'elementHandlers': specialElementHandlers
},
function (dispose) {
    pdf.save('home.pdf');
    console.log( pdfOutput );

    var pdfOutput = doc.output();
    console.log("file system - ");
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

       console.log(fileSystem.name);
       console.log(fileSystem.root.name);
       console.log(fileSystem.root.fullPath);

       fileSystem.root.getFile("test.pdf", {create: true}, function(entry) {
          var fileEntry = entry;
          console.log(entry);

          entry.createWriter(function(writer) {
             writer.onwrite = function(evt) {
             alert("write success");
          };

          console.log("writing to file");
             writer.write( pdfOutput );
          }, function(error) {
             console.log(error);
          });

       }, function(error){
          console.log(error);
       });
    },
        function(event){
            console.log( evt.target.error.code );
        });
  },
    margins
    )

Может ли кто-нибудь дать мне подсказку или указать мне в правильном направлении, как включить ваше решение в мое кодирование, чтобы я мог сохранить html-форматирование и изображения?

André Etienne 29 апр. 2014, в 17:05

Источник

Теги:

javascript

jquery

cordova

2 ответа

Ещё вопросы

cdaloisio · Answer 1 · 2014-04-30T11-40-00.000Z

1

У меня была такая же проблема. Вот что я сделал, чтобы решить эту проблему.

Заменить линию

writer.write( pdfOutput );

с этим:

var data = pdfOutput;
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
  array[i] = data.charCodeAt(i);
}
writer.write(buffer);

Не на 100% уверен, что я понимаю, что происходит, но из того, что я изучал, вам нужно преобразовать вывод из jsPDF в ArrayBuffer перед записью в файл.

cdaloisio 30 апр. 2014, в 11:40

0

Спасибо за ваш ответ, мне удалось сохранить его как на ipad, так и на nexus 7 с исправлениями и без них, думаю, я пойду с вашим исправлением. Но сейчас у меня, похоже, проблема с изображениями в html, которые не сохраняются так, как должно. При экспорте и сохранении через рабочий стол все изображения отображаются отлично, но на ipad и nexus 7 все искажается, как будто данные не читаются должным образом для рендеринга файла
André Etienne 30 апр. 2014, в 20:56
0

Вы когда-нибудь изменяли работу по сохранению нескольких HTML-данных в один PDF-файл?
André Etienne 30 апр. 2014, в 21:09
0

У меня также была та же проблема с рендерингом HTML. Я решил использовать библиотеку html2canvas js для точного рендеринга страницы, а затем для сохранения всего рендера в виде изображения внутри PDF. В противном случае вам может понадобиться просмотреть сообщения в стеке потока, в которых обсуждается создание «блоба».
cdaloisio 01 май 2014, в 07:32
0

Спасибо за совет, ребята, я получил его, чтобы написать PDF отлично. Когда дело дошло до упорядоченного форматирования, я использовал теги table & span, но теперь, когда он работает, возникла другая проблема, и это кажется распространенным ... Я не знаю, можно ли мне упомянуть об этом здесь, но это точно тоже самое. Это все работает и прекрасно сохраняет файл на Android, но на IOS файл не сохраняется из-за файловой системы. Сталкивались ли вы с этим вообще?
André Etienne 07 май 2014, в 10:02
0

@AndreEtienne: Можете ли вы опубликовать рабочий код для записи PDF на локальном хранилище? .. Я пытаюсь, но это не работает
Addy 11 авг. 2014, в 12:47
0

Это мне очень помогло. Спасибо за ответ.
SJ Reddy 20 авг. 2014, в 10:42

Показать ещё 4 комментария

André Etienne · Answer 2 · 2014-11-19T15-54-00.000Z

@AdilWaqar Прошу прощения за задержку в моем ответе, я переезжал домой. Ниже я включил полный javascript, который я закончил, чтобы получить работу в формате PDF. он отлично работает в Android и IOS, но проблема с IOS заключается в том, что после того, как PDF-код был создан, вы не сможете получить доступ к нему через файловый менеджер.

LocalStorage использовался для хранения перед выходом, он имеет то же имя идентификатора в полях span в выходном html для этого конкретного раздела, например, раздел 3 в javascript имел некоторые подписи и некоторые текстовые поля для вывода, localStorage для одного текстового поля в выход...

getItem('cwiRiskAccesAsessName')

выход html...

<tr><td>Assessor Name:</td><td><span id="EXPcwiRiskAccesAsessName"></span></td></tr>

Я использовал jquery, чтобы предварительно заполнить поля span, построив html, готовый для вывода, и добавив префикс к id каждого элемента, после того как я сделал это, я использовал эту простую линию, чтобы иметь дело с автопопуляцией на клавиатуре. note: игнорировать 'inpt' в onkeyup, то есть для префикса в другой части функции обработки данных

onKeyUp="dataHandling(this,1,'inpt');"
var saveData = localStorage.setItem(source.id,source.value);var getData = localStorage.getItem(source.id);$("#EXP"+source.id).text(getData);

Ниже приведен полный javascript

/* STORAGE-OUTPUT */
function storageOutput(){for (var i = 0; i < localStorage.length; i++){
	/* do something with localStorage.getItem(localStorage.key(i));*/
	$("#storageHolder").append(localStorage.key(i)+'<br/>');}
}

/* SETUP */
function setup(){
	window.requestFileSystem(LocalFileSystem.PERSISTENT,0,onRequestFileSystemSuccess,null);
	
	function onRequestFileSystemSuccess(fileSystem){
		var entry=fileSystem.root;entry.getDirectory("MAIN-DIRECTORY",{create:true,exclusive:false},onGetDirectorySuccess,onGetDirectoryFail);
	}
	function onGetDirectorySuccess(dir){}
	
	function onGetDirectoryFail(error){
		alert('Directory Setup Fail');}
	}/*CLEAR LOCALSTORAGE*/function clearLS(){
		localStorage.clear();alert(localStorage.length);
	}

function savePDF(id,filename) {
	
var folderName = 'MAIN-DIRECTORY/'+localStorage.getItem('householderAddress')+', '+localStorage.getItem('householderPostcode');
var saveData = localStorage.setItem('saveLocation',folderName);
var getData = localStorage.getItem('saveLocation');

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onRequestFileSystemSuccess, null); 

function onRequestFileSystemSuccess(fileSystem) { 
        var entry=fileSystem.root; 
        entry.getDirectory(getData, {create: true, exclusive: false}, onGetDirectorySuccess, onGetDirectoryFail); 
} 

function onGetDirectorySuccess(dir){} 

function onGetDirectoryFail(error){} 
	
	if(id==1){
		var pdf = new jsPDF('p', 'pt', 'a4'),source = $('#savesec1')[0]
		, specialElementHandlers = {
			'#bypassme': function(element, renderer){
				return true
			}
		}
	} else if (id==2){
		var pdf = new jsPDF('p', 'pt', 'a4'),source = $('#savesec2')[0]
		, specialElementHandlers = {
			'#bypassme': function(element, renderer){
				return true
			}
		}
	} else if (id==3){
		var pdf = new jsPDF('p', 'pt', 'a4'),source = $('#savesec3')[0]
		, specialElementHandlers = {
			'#bypassme': function(element, renderer){
				return true
			}
		}
	}
	
		margins = {top: 40,bottom: 60,left: 40,width: 522};
	
		pdf.fromHTML(source, margins.left, margins.top, {
				'width': margins.width // max width of content on PDF
				, 'elementHandlers': specialElementHandlers
			},
			function(dispose){
			/*SECTION 2*/
			if(id==2){
				pdf.addImage(localStorage.getItem('householderSig1'),'PNG',135,270,150,50);pdf.addImage(localStorage.getItem('assessSig1'),'PNG',135,410,150,50);
			}
			
			/*SECTION 3*/
			else if(id==3){
				pdf.addPage();pdf.setFontSize(15);pdf.setFontType("normal");pdf.text(20,30,'Assessor Name: '+localStorage.getItem('cwiRiskAccesAsessName'));pdf.text(20,45,'Assessor Agency: '+localStorage.getItem('cwiRiskAccesAsessAgency'));pdf.text(20,60, 'Date: '+localStorage.getItem('assessSig3Date'));pdf.text(20,75, 'Assessor Signature: ');pdf.addImage(localStorage.getItem('assessSig3'),'PNG',20,85,250,100);pdf.addPage();pdf.setFontSize(25);pdf.setFontType("normal");pdf.text(20,40,'Plan View:');pdf.addImage(localStorage.getItem('drawingOutput'),'PNG',20,40,500,500);pdf.addPage();pdf.setFontSize(15);pdf.setFontType("normal");pdf.text(20,30,'Front Elevation: '+localStorage.getItem('cwiRiskFrontNotes'));pdf.text(20,430,'Rear Elevation: '+localStorage.getItem('cwiRiskRearNotes'));pdf.addImage(localStorage.getItem('cwiRiskFrontOutput'),'PNG',40,40,500,350);pdf.addImage(localStorage.getItem('cwiRiskRearOutput'),'PNG', 40, 440, 500, 350);pdf.addPage();pdf.setFontSize(15);pdf.setFontType("normal");pdf.text(20,30,'Left Side Elevation: '+localStorage.getItem('cwiRiskLeftNotes'));pdf.text(20,430,'Right Side Elevation: '+localStorage.getItem('cwiRiskRightNotes'));pdf.addImage(localStorage.getItem('cwiRiskLeftOutput'),'PNG',40,40,500,350);pdf.addImage(localStorage.getItem('cwiRiskRightOutput'),'PNG',40,440,500,350);
			}
				/* GENERIC IMAGE OUTPUT
				
				pdf.addImage(imgData, 'PNG', 40, 400, 400, 160);
				pdf.addImage(imgData, 'PNG', 40, 600, 400, 160);
				for (var i=0;i<dataSources.length;i++){ 
					pdf.addPage();
					alert(dataSources[i].text);
				}
				pdf.save(filename+'.pdf');*/
					var pdfOutput = pdf.output();
					//console.log( pdfOutput );
					window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {					
					 
					   fileSystem.root.getFile(getData+'/'+filename+'.pdf', {create: true}, function(entry) {
						  var fileEntry = entry;
						  //console.log(entry);
					 
						  entry.createWriter(function(writer) {
							 writer.onwrite = function(evt) {
							 alert("PDF Saved Successfully");
						  };
					 
						  console.log("writing to file");
								var data = pdfOutput;
								var buffer = new ArrayBuffer(data.length);
								var array = new Uint8Array(buffer);
								for (var i = 0; i < data.length; i++) {
									array[i] = data.charCodeAt(i);
								}
								writer.write(buffer);
						  }, function(error) {
							 alert(error);
						  });
					 
					   }, function(error){
						  console.log(error);
					   });
					},
					function(event){
					 console.log( evt.target.error.code );
					});
			},
			margins
		)
}