我在生成PDF文件时遇到了麻烦。
我们的客户希望从网站用户提供的数据中生成包含选定内容的PDF文档。我试图使用javascript、jQuery和jsPDF的客户端解决方案,但我遇到了一些麻烦。
文档中可以显示的内容是文本、图像、颜色和其他内容。
这是文档生成器的粗略屏幕。
左边的列显示可以显示在文档上的选定内容。每个元素都有一个按钮(每个元素内的黑色区域),该按钮使用jQuery将整个元素克隆到文档容器(白色框)。一切正常工作,在将元素克隆到文档容器后,我使用Export按钮调用jQuery事件来使用jsPDF库并生成文档。但这是每件事都出错的地方。
如果单击“导出”按钮,将弹出“保存文件”对话框并要求我保存或查看该文件。当我打开那个新的PDF文件时,文档是完全空白的,它没有任何元素。但是,如果我没有向文档容器添加任何选定的内容,则保存的PDF文件将显示文档的头内容,这是每个文件的默认内容。
我不知道我做错了什么。javascript控制台不显示任何错误消息。
每个选定项都有类document-page. grid__item,文档容器有类grid__item。
我的代码如下:
$(document).on('click', '.js-add-element-to-document', function () {
$(this).parent().parent('.grid__item').clone().appendTo('.document-page');
} );
$('.js-export-to-pdf').on('click', function () {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML( $('.document-page'), function () {
var string = pdf.output( 'datauristring' );
});
if( typeof pdf !== 'undefined' ) {
setTimeout( function () {
pdf.save( 'travel-document.pdf' );
}, 500);
} else {
alert(' Error on generating document ');
}
});
我是不是忽略了别的什么?是否有什么东西破坏了我生成的文档的内容?谢谢。
发布于 2015-03-25 07:21:51
addHTML()是一个异步函数。您必须在您正在传递的回调中调用“保存”。
由于您有很多内容,所以当您调用保存时,addHTML可能还没有完成。这就是为什么保存的pdf是空白的。
例子-
pdf.addHTML($("#someDiv"), function(){
//addHTML completed
pdf.save("test.pdf");
});
https://stackoverflow.com/questions/28774397
复制相似问题