jsPDF pdf 生成用户输入,但当前页面不显示更改
jsPDF pdf to generate with user input, but current page does not display changes
所以,目前我有一个带有 HTML/表单复选框的静态页面。只有选中的复选框才会生成 JS pdf;内容通过父 div 从 'checkbox' 交换到我的 HTML。问题是在点击 'Generate PDF' 按钮之后。当前页面然后显示所做的更改以及解析为 PDF 的内容,只有 PDF 应该通过此代码生成。当前页面根本不应该改变。有什么想法吗? 基本上在点击'Download PDF'之后,PDF是通过上面描述的用户输入下载的,但是用下面的JS写的;页面本身不应反映这些更改。目前PDF生成准确,但是页面也变成PDF了。
$(document).ready(function() {
texts = {
item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
}
$("#container").css('background', '#fff')
$('.download-pdf').click(function() {
// this should trigger the below to generate in the PDF,
// not display it on page > then generate to pdf. Just pdf!
notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();
$.each(yesChecked, function( index, el ) {
$(el).show().html(texts[$(el).attr('id')]);
});
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {
setTimeout(function(){
location.reload();
},3000);
});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} else if (typeof pdf !== 'undefined') {
setTimeout(function() {
pdf.save(file + '.pdf');
// $("#item4").hide();
}, 2000);
} else {
alert('Error 0xE001BADF');
}
});
$('.checkmate').on('click', function() {
if ($(this).is(':checked'))
$(this).parent('div').css({"color":"white","background":"green"});
else
$(this).parent('div').css('background-color', '');
});
});
HERE IS A SAMPLE JSFIDDLE DEMO.. 帮助说明 (但是 PDF 生成功能需要实时服务器) 所以,如果你能想象维护功能 'Static Page checkbox conditions > PDF' 和只是没有静态页面本身,更改用户所在的页面。这就是目标。
你可以像这样在addHTML
的回调中保存pdf
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function(){
pdf.save('test.pdf');
});
jsfiddle
更新
The current page should not change at all
您正在对 DOM 进行更改,因此页面将会更改。如果您不想编辑当前 DOM,您需要克隆节点并将其传递给 pdf.save()
。这不起作用,我在文档中找不到任何理由,因为它太过时了。
您仍然可以在用户保存其文档后重新加载页面,这会将 DOM 恢复为默认状态。
所以,目前我有一个带有 HTML/表单复选框的静态页面。只有选中的复选框才会生成 JS pdf;内容通过父 div 从 'checkbox' 交换到我的 HTML。问题是在点击 'Generate PDF' 按钮之后。当前页面然后显示所做的更改以及解析为 PDF 的内容,只有 PDF 应该通过此代码生成。当前页面根本不应该改变。有什么想法吗? 基本上在点击'Download PDF'之后,PDF是通过上面描述的用户输入下载的,但是用下面的JS写的;页面本身不应反映这些更改。目前PDF生成准确,但是页面也变成PDF了。
$(document).ready(function() {
texts = {
item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
}
$("#container").css('background', '#fff')
$('.download-pdf').click(function() {
// this should trigger the below to generate in the PDF,
// not display it on page > then generate to pdf. Just pdf!
notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();
$.each(yesChecked, function( index, el ) {
$(el).show().html(texts[$(el).attr('id')]);
});
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {
setTimeout(function(){
location.reload();
},3000);
});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} else if (typeof pdf !== 'undefined') {
setTimeout(function() {
pdf.save(file + '.pdf');
// $("#item4").hide();
}, 2000);
} else {
alert('Error 0xE001BADF');
}
});
$('.checkmate').on('click', function() {
if ($(this).is(':checked'))
$(this).parent('div').css({"color":"white","background":"green"});
else
$(this).parent('div').css('background-color', '');
});
});
HERE IS A SAMPLE JSFIDDLE DEMO.. 帮助说明 (但是 PDF 生成功能需要实时服务器) 所以,如果你能想象维护功能 'Static Page checkbox conditions > PDF' 和只是没有静态页面本身,更改用户所在的页面。这就是目标。
你可以像这样在addHTML
的回调中保存pdf
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function(){
pdf.save('test.pdf');
});
jsfiddle
更新
The current page should not change at all
您正在对 DOM 进行更改,因此页面将会更改。如果您不想编辑当前 DOM,您需要克隆节点并将其传递给 pdf.save()
。这不起作用,我在文档中找不到任何理由,因为它太过时了。
您仍然可以在用户保存其文档后重新加载页面,这会将 DOM 恢复为默认状态。