JsPDF generates PDF and displays the example on the web page

  • 2020-03-30 01:21:06
  • OfStack

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
<title>jsPDF</title> 
<script type="text/javascript" src="jspdf.js"></script> 
<script type="text/javascript"> 
window.onload=function(){ 
var doc = new jsPDF(); 
//var doc = new jsPDF('landscape');// The horizontally  

doc.setProperties({//Setting document properties
title: 'Title', 
subject: 'This is the subject', 
author: 'Dragon', 
keywords: 'javascript, web 2.0, ajax', 
creator: 'MEEE' 
}); 

doc.setTextColor(0,255,0); 
doc.setFontSize(22); 
doc.setFont("times"); 
doc.setFontType("italic"); 
doc.text(20, 20, 'Hello world!');//To add text

doc.setTextColor(255,0,0); 
doc.setFontSize(16); 
doc.setFont("helvetica"); 
doc.setFontType("bold"); 
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); 

doc.addPage();//Add a page

doc.setLineWidth(1);//Set the line width
doc.setDrawColor(0,255,0);//Set the brush color
doc.setFillColor(255,0,0);//Set the fill color
doc.line(60, 20, 115, 60);//Draw a line, two coordinates
doc.rect(100, 50, 20, 30); //Draw rectangle, top left coordinate, width, height, border only
doc.ellipse(20, 20, 20, 10, 'F');//Draw an ellipse, center coordinates, width, height, only edges
doc.circle(120, 20, 20, 'FD');//Draw a circle, center coordinates, radius, border and fill
doc.triangle(100, 100, 110, 100, 120, 130, 'FD'); 

//doc.output('datauri');// The direct output is new web page  
document.getElementById("iframe123").src = doc.output('datauristring');//Displays in an iframe
} 
</script> 
</head> 
<body> 
<iframe id="iframe123" frameborder="0" width="400" height="500"></iframe> 
</body> 
</html> 

Related articles: