标签: jspdf
将长html导入分割PDF
我的情况是:
单击按钮时,将html上的数据导入PDF文件.
由于此PDF必须具有一些复杂的必需样式,因此我的第一步是使用html2canvas.js将此页面转换为图像,然后使用jsPDF.js将此图像导入PDF
当数据太大时,必须拆分PDF以保存所有数据,这样做,所以我在这里使用了代码:https://github.com/MrRio/jsPDF/pull/397
我的问题是:在Firefox上,第2页或第3页上的PDF分割页面无法显示,它们完全是空白的.但在第1页它很好.(这是为firefox)
我测试了其他浏览器它们都很好.有人可以说明如何解决这个问题吗？
这是我的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;
}; …推荐指数
解决办法
查看次数
如何在jsPDF库中启用UTF-8
我很高兴使用jsPDF库帮助我将我的HTML页面导出为PDF文件.我遇到了一些困难.我从http://parall.ax/products/jspdf/下载了这个库.当我使用像š,ć(UTF-8)这样的字符时,在pdf中它们看起来像错误.即使我通过doc.text插入.在图书馆的网站上,当我使用他们的例子并使用其中一些字符更改文本时 - 它可以工作.因此,假设使用UTF-8.为什么它不能在我的电脑上工作.
我提供了我的代码.这里缺少的是lib(可以从网站上下载),你会看到我的问题.为什么CSS在pdf中消失了？
testing.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTING JSPDF LIB</title>
<script type="text/javascript" src="pdffile.js" charset="utf-8"></script>
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
<script>
function redirect() {
document.write("Hello world" + '<br />');
}
</script>
</head>
<body>
<div id="box" class="box-shadow">
<input type="submit" name="ok" id="ok" value="LETS TRY" onClick="redirect();pdf();" /> </div>
</div>
</body>
</html>
pdffile.js
function pdf() { …推荐指数
解决办法
查看次数
如何使用jsPDF以PDF格式显示两页图像？
我有一个HTML页面.我有一个按钮,当我单击此按钮时,它将使用html2canvas将整个html页面转换为数据图像,并使用jsPDF库将其放入PDF.我正在使用的javascript是
$("#printButton").click(function(){
html2canvas([document.getElementById('form1')], {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/jpeg',1.0);
var doc = new jsPDF('landscape');
doc.addImage(imageData,'JPEG',5,20,200,150);
doc.save('Test.pdf');
}
});
});
它仅在第一页显示图像.但是每当html页面大小更多时,我想剪切图像数据并将其放在PDF格式的两页中.请帮我解决这个问题.
推荐指数
解决办法
查看次数
使用带有格式化表数据的jsPDF创建pdf
我可以使用下面的脚本从html表生成PDF文件:但我得到的所有列数据都是逐行的.
请帮助我以表格格式化方式生成PDF文件.(在此脚本中使用列边框,边距或填充,标题)
我使用jsPDF lib脚本生成一个HTML表格.
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#TableId')[0]
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer){
return true
}
}
, margins = {
top: 20,
bottom: 20,
left: 30,
width: 922
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, …推荐指数
解决办法
查看次数
如何使用jsPDF从SVG轻松创建PDF？
我正在尝试创建一个pdf,但我有一些SVG图片.我找到了有关此问题的信息,但我只需要使用JavaScript,也就是说,没有jQuery.
我在这里找到了jsPDF:https://github.com/MrRio/jsPDF
插件jspdf.plugin.sillysvgrenderer.js(在同一个文件夹中),我们可以在其中找到在文件夹测试中创建的PDF的例子.
但是当我尝试自己生成PDF时,它不起作用,我不明白为什么.
你知道怎么做吗？
推荐指数
解决办法
查看次数
jsPDF addHTML将低质量图像导出为PDF
从最近2天搜索的简单问题,但没有找到解决方案我正在使用jsPDF的addHTML api将html转换为pdf
$('#loadPdf').on('click', function() {
var pdf = new jsPDF('p', 'in', 'a4');
pdf.addHTML($('#complete')[0], function() {
pdf.save('new.pdf');
pdf.output('datauri');
});
});
这是生成模糊图像pdf文本显示模糊.我搜索了很多找到一些链接(下面分享),但没有得到答案.
有什么方法可以获得高质量的图像pdf.如果我不使用addHTML api并使用任何其他api,那么图像不会以pdf格式显示.请帮忙
推荐指数
解决办法
查看次数
在服务器上存储生成的PDF文件
使用该jsPDF插件,我正在创建一个.pdf文件并根据按钮单击生成下载.我想将文件保存到我的服务器而不是启动下载.因此,当单击按钮时,我希望将文件保存在:
/tmp/uploads/pdf/example.pdf
我知道我需要Jquery.Ajax用来将文件发布到服务器.但是,查看文档,我没有看到任何支持.pdf作为数据类型.
我的代码:
$(document).on("click", "#PDF", function () {
var table = document.getElementById("result");
var tbl = window.sessionStorage.getItem("tbl");
var cols = [],
data = [];
function html() {
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(table, true);
doc.autoTable(res.columns, res.data);
doc.save( tbl+".pdf");
}
html();
});
基于此xml文档保存示例,我尝试了以下操作:
var pdfDocument = doc.save( tbl+".pdf");
var pdfRequest = $.ajax({
url: "/tmp/uploads/pdf",
processData: false,
data: pdfDocument
});
这下载了文件而不是保存它.我该如何保存文件？
推荐指数
解决办法
查看次数
使用jsPDF创建的pdf中的重复内容
我正在使用jsPDF将html转换为pdf.在某些情况下,html具有svg图表,一些数据在生成的pdf中重复.
例如,如果图表有图例,它们就会重复.请参见下面的截图.城市名称和百分比重复出现.
以下是创建pdf的代码.
pdf.addHTML($("#page1"), options, function(){
pdf.addPage();
pdf.addHTML($("#page2"), options, function(){
pdf.addPage();
pdf.output('dataurlnewwindow');
});
});
编辑1:
这是我到目前为止所想到的.
<div id="outerDiv">
<div id="pieChart"></div>
</div>
当我这样做时,pdf.addHTML($("#pieChart")这里没有问题.
但是,当我这样做pdf.addHTML($("#outerDiv"),然后标签重复.
这就是我生成c3js图表的方法
var pieChart = c3.generate({
bindto: '#pieChart',
编辑2: -
以下是我的整个代码.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
<script type='text/javascript'>
function replaceAllSVGsWithTempCanvas(elemSelector) {
var svgElements = $(elemSelector).find('svg');
//replace all …推荐指数
解决办法
查看次数
如何在Chrome的PDF查看器中显示带有名称的javascript文件对象？
我有一个Blob对象(用jsPDF生成)形式的PDF文件,我想在一个<iframe>元素中显示.
我可以这样轻松地做到这一点:
iframe.src = URL.createObjectURL( blob )
PDF格式正确,但我得到一个深奥的字符串代替其名称(请参阅Chrome的PDF查看器下面的图片).
所以我尝试将Blob转换为File对象,以便为它提供一个人类可读的名称.
var file = new File( [blob], 'a_name.pdf', { type: 'application/pdf' } )
iframe.src = URL.createObjectURL( file )
它适用于Firefox:从标题的PDF查看器保存文件时保留名称.不幸的是,它被放入Chrome中,并在加载到PDF查看器之前替换为随机文件名.
您知道是否可以在<iframe>文件名中显示PDF文件对象？
推荐指数
解决办法
查看次数
如何制作多表标题
我正在尝试制作一个合并了2个标头的表.目前我制作了2个单独的表,有2个单独的标题,看起来没问题,但是当表格宽度扩大时,第一个表格标题不会展开.我如何合并2个标题,或者我可以制作1个表与2个表头.请看图片(目前桌面如何与2个桌面阅读器)
这是我的代码:
function createPDF(){
/** START PDF INSTANCE */
//var doc = new jsPDF('p', 'pt');
var doc = new jsPDF('l', 'pt');
var row = 80;
addPdfHeader(doc, row, vm.translate("REPORT.LEGALFORMS ")+" "+vm.activeCompanyYear);
doc.setFillColor(33, 150, 243);
var columns = [ " ",vm.activeCompanyYear,vm.activeCompanyYear-1,vm.activeCompanyYear-2];
var rows = [];
var description = "";
for(var j=0; j<vm.reportData.length; j++){
var obj = vm.reportData[j];
description = obj.descriptionEng;
if(description == "total"){
description = vm.translate("REPORT.REGISTRY.TOTAL");
}
var singleRow = [description,
obj.year3Total,
obj.year3Local,
obj.year3International,
obj.year2Total,
obj.year2Local,
obj.year2International,
obj.year1Total,
obj.year1Local,
obj.year1International
]
rows.push(singleRow); …推荐指数
解决办法
查看次数
标签 统计
jspdf ×10
javascript ×6
pdf ×6
jquery ×3
html ×2
html2canvas ×2
ajax ×1
html-table ×1
iframe ×1
pdf-viewer ×1
svg ×1
utf-8 ×1