jsPDF生成pdf后在網(wǎng)頁(yè)展示實(shí)例
更新時(shí)間：2014年01月16日 15:38:45 作者：
本文為大家介紹下jsPDF生成pdf后如何在網(wǎng)頁(yè)展示，下面有個(gè)不錯(cuò)示例，大家可以參考下
復(fù)制代碼 代碼如下:
<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({//設(shè)置文檔屬性
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();//添加頁(yè)
doc.setLineWidth(1);//設(shè)置線寬
doc.setDrawColor(0,255,0);//設(shè)置畫筆顏色
doc.setFillColor(255,0,0);//設(shè)置填充顏色
doc.line(60, 20, 115, 60);//畫線，兩個(gè)坐標(biāo)
doc.rect(100, 50, 20, 30); //畫矩形，左上角坐標(biāo)，寬度，高度，只有邊框
doc.ellipse(20, 20, 20, 10, 'F');//畫橢圓，中心點(diǎn)坐標(biāo)，寬度，高度，只有邊
doc.circle(120, 20, 20, 'FD');//畫圓，中心點(diǎn)坐標(biāo)，半徑，邊框和填充都有
doc.triangle(100, 100, 110, 100, 120, 130, 'FD');
//doc.output('datauri');//直接輸出為新的web頁(yè)
document.getElementById("iframe123").src = doc.output('datauristring');//在iframe中顯示
}
</script>
</head>
<body>
<iframe id="iframe123" frameborder="0" width="400" height="500"></iframe>
</body>
</html>
相關(guān)文章
這篇文章主要總結(jié)介紹了Bootstrap table的使用方法，服務(wù)器分頁(yè)、客戶端分頁(yè)的轉(zhuǎn)換，table刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
詳解照片瀑布流效果（js，jquery分別實(shí)現(xiàn)與知識(shí)點(diǎn)總結(jié)）
本篇文章主要介紹了照片瀑布流效果，實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享
這篇文章主要介紹了手機(jī)開發(fā)必備技巧：javascript及CSS功能代碼分享,本文講解了viewport(可視區(qū)域)操作、鏈接操作、javascript事件等內(nèi)容,需要的朋友可以參考下2015-05-05
uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法
在uni-app中彈窗的用途很常見,比如商品規(guī)格選取、廣告彈窗等,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法,需要的朋友可以參考下2023-01-01
網(wǎng)站頁(yè)面自動(dòng)跳轉(zhuǎn)實(shí)現(xiàn)方法PHP、JSP（上）
自動(dòng)轉(zhuǎn)向，也叫自動(dòng)重定向。自動(dòng)跳轉(zhuǎn)，指當(dāng)訪問(wèn)用戶登陸到某網(wǎng)站時(shí)，自動(dòng)將用戶轉(zhuǎn)向其它網(wǎng)頁(yè)地址的一種技術(shù)。轉(zhuǎn)向的網(wǎng)頁(yè)地址可以是網(wǎng)站內(nèi)的其它網(wǎng)頁(yè)，也可以是其它網(wǎng)站。2010-08-08
mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法
這篇文章主要介紹了mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
淺談javascript的call()、apply()、bind()的用法
這篇文章主要為大家詳細(xì)介紹了javascript的call()、apply()、bind()的用法，探討JavaScript中函數(shù)的一些特殊用法，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript上傳文件時(shí)不用刷新頁(yè)面方法總結(jié)（推薦）
這篇文章主要介紹了JavaScript上傳文件時(shí)不用刷新頁(yè)面方法，用js+css代碼詳細(xì)介紹了操作過(guò)程,需要的朋友可以參考下2017-08-08
uniapp微信小程序獲取當(dāng)前定位城市信息的實(shí)例代碼
因?yàn)閡niapp官網(wǎng)文檔的定位功能,只能提供經(jīng)緯度,如果要獲取當(dāng)前具體的位置信息,必須要調(diào)取官方的地圖方法,然后在地圖上選點(diǎn),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前定位城市信息的相關(guān)資料,需要的朋友可以參考下2022-08-08
總結(jié)Javascript中的隱式類型轉(zhuǎn)換
這篇文章談?wù)凧avaScript的隱式類型轉(zhuǎn)換，我們知道在JavaScript中聲明變量不需指定類型， 對(duì)變量賦值也沒有類型檢查，同時(shí)JavaScript允許隱式類型轉(zhuǎn)換。這些特征說(shuō)明JavaScript屬于弱類型的語(yǔ)言。2016-08-08