萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jsPDF生成pdf後在網頁展示實例

jsPDF生成pdf後在網頁展示實例

 本文為大家介紹下jsPDF生成pdf後如何在網頁展示,下面有個不錯示例,大家可以參考下

代碼如下: <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');//橫排    doc.setProperties({//設置文檔屬性  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!');//添加文字    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();//添加頁    doc.setLineWidth(1);//設置線寬  doc.setDrawColor(0,255,0);//設置畫筆顏色  doc.setFillColor(255,0,0);//設置填充顏色  doc.line(60, 20, 115, 60);//畫線,兩個坐標  doc.rect(100, 50, 20, 30); //畫矩形,左上角坐標,寬度,高度,只有邊框  doc.ellipse(20, 20, 20, 10, 'F');//畫橢圓,中心點坐標,寬度,高度,只有邊  doc.circle(120, 20, 20, 'FD');//畫圓,中心點坐標,半徑,邊框和填充都有  doc.triangle(100, 100, 110, 100, 120, 130, 'FD');    //doc.output('datauri');//直接輸出為新的web頁  document.getElementById("iframe123").src = doc.output('datauristring');//在iframe中顯示  }  </script>  </head>  <body>  <iframe id="iframe123" frameborder="0" width="400" height="500"></iframe>  </body>  </html> 
copyright © 萬盛學電腦網 all rights reserved