我有一些示例代码位于 pdfkit 的分支上:
https://github.com/EricG-Personal/pdf_printing/tree/feature/from_pdfkit
我使用 pdfkit 创建简单 PDF 的代码是:
var doc = new PDFDocument( { size: 'legal' } );
this.stream = doc.pipe( blobStream() );
doc.fontSize( 9 );
doc.font( 'Times-Roman' );
doc.text( "hello, world! I'm really here" );
doc.rect( 10, 10, 100, 100 ).stroke();
doc.end();
this.stream.on( 'finish', function()
{
console.log( "Stream Finished" );
this.setState( { pdfData: this.stream.toBlobURL( 'application/pdf' ) } );
}.bind( this ) );
对于 jsPDF - https://github.com/EricG-Personal/pdf_printing/tree/feature/from_jspdf
var doc = new jsPDF({unit: 'pt', format: 'legal'});
var someText = "hello, world!";
var topCoordinate = 72;
var leftCoordinate = 72;
var padding = 8;
doc.setFont( "helvetica" );
doc.setFontSize( 24 );
var lineHeight = doc.getLineHeight();
var textWidth = doc.getTextWidth( someText );
var rectHeight = ( lineHeight + ( padding * 2 ) );
var halfRectHeight = rectHeight / 2;
var halfLineHeight = lineHeight / 2;
var textYCoordinate = topCoordinate + halfRectHeight + halfLineHeight;
console.log( "Height: " + lineHeight );
console.log( "Width: " + textWidth );
doc.setDrawColor( 255, 0, 0 );
doc.rect( leftCoordinate, topCoordinate, textWidth, rectHeight );
doc.text( someText, leftCoordinate + padding, textYCoordinate );
doc.setDrawColor( 0, 0, 0 );
doc.rect( leftCoordinate, textYCoordinate - lineHeight, textWidth, lineHeight );
var blob = doc.output( 'bloburl' );
var mythis = this;
setTimeout( function()
{
console.log( "Setting State" );
mythis.setState({pdfData: blob});
}, 5000);
在这两种情况下,PDF 数据都在 iframe 中正确呈现,我最终调用:
window.frames["pdf_doc"].focus();
window.frames["pdf_doc"].print();
当 iframe 的 onLoad 函数触发时。
但是,实际要打印的页面是空白的。