pdfh5.js
![GitHub forks](https://img.shields.io/github/forks/gjTool/pdfh5.svg?style=social)
ç±äºç²¾åæéï¼æ¬æ件ææ¶ä¸ä¼æ´æ°äºï¼å¦ææé®é¢å¯ä»¥å°å客çè¨å¹¶çä¸èç³»æ¹å¼ï¼æ½ç©ºåå¤
reactãvueåå¯ä½¿ç¨
example/testæ¯vue使ç¨ç¤ºä¾ï¼vue示ä¾å±ç¤ºaxiosè°ç¨æ¥å£å±ç¤ºpdfï¼è·¨å代çï¼ç¸å¯¹è·¯å¾çæ¹æ³
![pdfh5.js示ä¾](https://img-blog.csdnimg.cn/20190731133403792.gif)
æ´æ°ä¿¡æ¯
- 2021.10.08 æ´æ°ï¼ ä¿®å¤ä¸äºbugï¼æ°å¢ä¸è½½pdfæ¹æ³pdfh5.download("xx.pdf",function(){})
pdfh5å¨çº¿é¢è§ ï¼å»ºè®®ä½¿ç¨è°·ææµè§å¨F12ææºæ¨¡å¼æå¼é¢è§ï¼
å¿«é使ç¨ï¼æ两ç§æ¹å¼ï¼
ä¸ãscriptæ ç¾å¼å
¥æ¹å¼ï¼éä¸è½½æ¬é¡¹ç®æ件夹css/pdfh5.cssãjså
æææ件ï¼
<link rel="stylesheet" href="css/pdfh5.css" />
<div id="demo"></div>
- 3.ä¾æ¬¡å¼å
¥jsï¼éå¼ç¨æ¬é¡¹ç®çjs,ä¸è¦å¼ç¨å®æ¹çpdf.js,jqueryå¯ä»¥å¼ç¨å
¶å®ççï¼
<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
äºãnpmå®è£
æ¹å¼ï¼éåºäºvueï¼, react使ç¨æ¹æ³ç±»ä¼¼vueï¼example/react-testæ¯react使ç¨ç¤ºä¾ï¼
npm install pdfh5
<template>
<div id="app">
<div id="demo"></div>
</div>
</template>
<script>
import Pdfh5 from "pdfh5";
export default {
name: 'App',
data() {
return {
pdfh5: null
};
},
mounted() {
//å®ä¾å
this.pdfh5 = new Pdfh5("#demo", {
pdfurl: "../../static/test.pdf"
});
//çå¬å®æäºä»¶
this.pdfh5.on("complete", function (status, msg, time) {
console.log("ç¶æï¼" + status + "ï¼ä¿¡æ¯ï¼" + msg + "ï¼èæ¶ï¼" + time + "毫ç§ï¼æ»é¡µæ°ï¼" + this.totalNum)
})
}
}
</script>
<style>
@import "pdfh5/css/pdfh5.css";
*{
padding: 0;
margin: 0;
}
html,body,#app {
width: 100%;
height: 100%;
}
</style>
-
注æï¼å¦æcsså¼ç¨æ¥éçè¯ï¼æä¸é¢çæ¹å¼å¼ç¨ã
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
APIæ¥å£æ¹æ³
å®ä¾å
-
pdfh5å®ä¾åçæ¶åä¼ ä¸¤ä¸ªåæ°ï¼selectoréæ©å¨ï¼optionsé
置项åæ°ï¼ä¼è¿åä¸ä¸ªpdfh5å®ä¾å¯¹è±¡ï¼å¯ä»¥ç¨æ¥æä½pdfï¼çå¬ç¸å
³äºä»¶
var pdfh5 = new Pdfh5(selector, options);
åæ°å称 |
ç±»å |
åå¼ |
æ¯å¦å¿
é¡» |
ä½ç¨ |
selector |
String |
- |
â |
pdfh5ç容å¨éæ©å¨ |
options |
Object |
- |
à |
pdfh5çé
置项åæ° |
optionsé
置项åæ°å表
-
示ä¾ï¼ é
置项åæ° pdfurl
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
åæ°å称 |
ç±»å |
åå¼ |
ä½ç¨ |
pdfurl |
String |
- |
pdfå°å |
URIenable |
Boolean |
trueãfalseï¼ é»è®¤false |
trueå¼å¯å°åæ fileåæ° |
data |
Array(arraybuffer) |
- |
pdfæä»¶æµ ï¼ä¸pdfurläºéä¸(äºè¿å¶PDFæ°æ®ã使ç¨ç±»ååæ°ç»ï¼Uint8Arrayï¼å¯ä»¥æé«å
å使ç¨çãå¦æPDFæ°æ®æ¯BASE64ç¼ç çï¼è¯·å
使ç¨atobï¼ï¼å°å
¶è½¬æ¢ä¸ºäºè¿å¶å符串ã) |
renderType |
String |
"canvas"ã"svg"ï¼é»è®¤"canvas" |
pdf渲ææ¨¡å¼ |
pageNum |
Boolean |
trueãfalseï¼ é»è®¤true |
æ¯å¦æ¾ç¤ºå·¦ä¸è§é¡µç |
backTop |
Boolean |
trueãfalseï¼ é»è®¤true |
æ¯å¦æ¾ç¤ºå³ä¸è§åå°é¡¶é¨æé® |
lazy |
Boolean |
trueãfalseï¼ é»è®¤false |
æ¯å¦å¼å¯æå è½½(å®é
æ¯å»¶è¿å è½½å¾çï¼å³å±å¹æ»å¨å°pdfä½ç½®æ¶å è½½å¾ç) |
maxZoom |
Number |
æ大åæ°3 |
æå¿ç¼©æ¾æ大åæ° |
scale |
Number |
æ大æ¯ä¾5ï¼é»è®¤1.5 |
pdf渲æçæ¯ä¾ |
scrollEnable |
Boolean |
trueãfalseï¼ é»è®¤true |
æ¯å¦å
许pdfæ»å¨ |
zoomEnable |
Boolean |
trueãfalseï¼ é»è®¤true |
æ¯å¦å
许pdfæå¿ç¼©æ¾ |
cMapUrl |
String |
é»è®¤"https://www.gjtool.cn/cmaps/" |
解æpdfæ¶ï¼ç¹æ®æ
åµä¸æ¾ç¤ºå®æ´åä½çcmapsæ件夹路å¾ï¼ä¾å¦ cMapUrl:"https://unpkg.com/[email protected]/cmaps/" |
limit |
Number |
é»è®¤0 |
éå¶pdfå è½½æå¤§é¡µæ° |
logo |
Object |
{src:"pdfh5.png",x:10,y:10,width:40,height:40}srcæ°´å°å¾çè·¯å¾ï¼å»ºè®®ä½¿ç¨pngéæå¾çï¼ï¼widthæ°´å°å®½åº¦ï¼heightæ°´å°é«åº¦ï¼ä»¥æ¯é¡µpdfå·¦ä¸è§ä¸º0ç¹ï¼xãy为å移å¼ã é»è®¤false |
ç»æ¯é¡µpdfæ·»å æ°´å°logoï¼canvas模å¼ä¸ä½¿ç¨ï¼ |
goto |
Number |
é»è®¤0 |
å è½½pdf跳转å°ç¬¬å 页 |
textLayer |
Boolean |
trueãfalseï¼ é»è®¤false |
æ¯å¦å¼å¯textLayerï¼å¯ä»¥å¤å¶ææ¬ï¼canvas模å¼ä¸ä½¿ç¨ï¼ãå¤äºæµè¯é¶æ®µï¼ä½ç½®å移严éã |
background |
Object |
{color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}ï¼åcssçbackgroundå±æ§è¯æ³ç¸åï¼é»è®¤false |
æ¯å¦å¼å¯èæ¯å¾æ¨¡å¼ |
åæ°å称 |
ç±»å |
åå¼ |
ä½ç¨ |
httpHeaders |
Object |
é»è®¤ç©º |
设置httpHeadersä¿¡æ¯ |
withCredentials |
Boolean |
é»è®¤false |
æ¯å¦ä½¿ç¨cookieææææ 头ä¹ç±»çåæ®ååºè·¨ç«ç¹è®¿é® |
password |
String |
é»è®¤ç©º |
ç¨äºè®¿é®æå¯ç çPDF |
stopAtErrors |
Boolean |
é»è®¤false |
å½æ æ³æå解æå
³èçPDFæ°æ®æ¶ï¼åæ¢è§£æ |
disableFontFace |
Boolean |
é»è®¤false |
é»è®¤æ
åµä¸ï¼åä½ä¼è½¬æ¢ä¸ºOpenTypeåä½ï¼å¹¶éè¿åä½è§åæ¥å è½½ãå¦æç¦ç¨ï¼åä½å°ä½¿ç¨å
ç½®çåä½æ¸²æå¨æ¸²æã |
disableRange |
Boolean |
é»è®¤false |
ç¦ç¨èå´è¯·æ±å è½½PDFæ件ãå¯ç¨åï¼å¦ææå¡å¨æ¯æé¨åå
容请æ±ï¼åå°ä»¥åçå½¢å¼è·åPDFã |
disableStream |
Boolean |
é»è®¤false |
ç¦ç¨æµå¼ä¼ è¾PDFæ件æ°æ®ãé»è®¤æ
åµä¸ï¼PDF.jså°è¯å è½½æåçPDFã |
disableAutoFetch |
Boolean |
é»è®¤false |
ç¦ç¨PDFæ件æ°æ®çé¢åãå¯ç¨èå´è¯·æ±åï¼å³ä½¿ä¸éè¦æ¾ç¤ºå½å页é¢ï¼PDF.jsä¹ä¼èªå¨ç»§ç»è·åæ´å¤æ°æ®ãé»è®¤å¼ä¸ºâ falseâã注æï¼è¿å¿
é¡»ç¦ç¨æµä¼ è¾disableStream |
pdfæ件æµè¯·æ±ç¤ºä¾ï¼ä»¥jq ajax为ä¾ï¼
-
$.ajax({
url: "https://www.gjtool.cn/pdfh5/git.pdf", //å设è¿æ¯pdfæ件æµç请æ±æ¥å£
type: "get",
mimeType: 'text/plain; charset=x-user-defined',//jq ajax请æ±æ件æµçæ¹å¼
success: function (data) {
var pdfh5 = new Pdfh5('#demo', {
data: data
});
}
});
-
$.ajax({
url: "https://www.gjtool.cn/pdfh5/git.pdf", //å设è¿æ¯pdfæ件æµç请æ±æ¥å£
type: "get",
mimeType: 'text/plain; charset=x-user-defined',//jq ajax请æ±æ件æµçæ¹å¼
success: function (data) {
var rawLength = data.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (i = 0; i < rawLength; i++) {
array[i] = data.charCodeAt(i) & 0xff;
}
var pdfh5 = new Pdfh5('#demo', {
data: array
});
}
});
-
$.ajax({
url: "https://www.gjtool.cn/pdfh5/git.pdf", //å设è¿æ¯pdfæ件æµç请æ±æ¥å£
type: "get",
mimeType: 'text/plain; charset=x-user-defined',//jq ajax请æ±æ件æµçæ¹å¼
success: function (data) {
var rawLength = data.length;
var array = [];
for (i = 0; i < rawLength; i++) {
array.push(data.charCodeAt(i) & 0xff);
}
var pdfh5 = new Pdfh5('#demo', {
data: array
});
}
});
- axios示ä¾
axios.get("https://www.gjtool.cn/pdfh5/git.pdf",{
responseType:"arraybuffer"
}).then(res=>{
this.pdfh5 = new Pdfh5('#demo', {
data: res.data
});
})
- base64ç å 载示ä¾
let pdfBase64 = "adfxcvadfasdfxxxxx";
new Pdfh5('#demo', {
pdfurl: "data:application/pdf;base64,"+pdfBase64,
});
methods æ¹æ³å表
-
示ä¾ï¼ æ¯å¦å
许pdfæ»å¨
pdfh5.scrollEnable(true) //å
许pdfæ»å¨
pdfh5.scrollEnable(false) //ä¸å
许pdfæ»å¨
æ¹æ³å |
ä¼ å |
ä¼ ååå¼ |
ä½ç¨ |
scrollEnable |
Boolean |
trueãfalseï¼ é»è®¤true |
æ¯å¦å
许pdfæ»å¨(éè¦å¨pdfå è½½å®æå使ç¨) |
zoomEnable |
Boolean |
trueãfalseï¼ é»è®¤true |
æ¯å¦å
许pdfæå¿ç¼©æ¾(éè¦å¨pdfå è½½å®æå使ç¨) |
show |
Function |
带ä¸ä¸ªåè°å½æ° |
pdfh5æ¾ç¤º |
hide |
Function |
带ä¸ä¸ªåè°å½æ° |
pdfh5éè |
reset |
Function |
带ä¸ä¸ªåè°å½æ° |
pdfh5è¿å |
destroy |
Function |
带ä¸ä¸ªåè°å½æ° |
pdfh5éæ¯ |
on |
(String, Function) |
Stringï¼çå¬çäºä»¶åï¼Functionï¼çå¬çäºä»¶åè° |
onæ¹æ³çå¬ææäºä»¶ |
goto |
Number |
Number:è¦è·³è½¬çpdfé¡µæ° |
pdf跳转å°ç¬¬å 页ï¼pdfå è½½å®æå使ç¨ï¼ |
download |
(String, Function) |
Stringï¼ä¸è½½pdfçå称ï¼é»è®¤download.pdfï¼Functionï¼ä¸è½½å®æåçåè° |
ä¸è½½pdf |
onæ¹æ³çå¬ææäºä»¶-äºä»¶åå表
-
示ä¾ï¼ çå¬pdfåå¤å¼å§æ¸²æï¼æ¤æ¶å¯ä»¥æ¿å°pdfæ»é¡µæ°
pdfh5.on("ready", function () {
console.log("æ»é¡µæ°ï¼" + this.totalNum)
})
äºä»¶å |
åè° |
ä½ç¨ |
init |
Function |
çå¬pdfh5å¼å§åå§å |
ready |
Function |
çå¬pdfåå¤å¼å§æ¸²æï¼æ¤æ¶å¯ä»¥æ¿å°pdfæ»é¡µæ° |
error |
Function(msg,time) |
çå¬å 载失败ï¼msgä¿¡æ¯ï¼timeèæ¶ |
success |
Function(msg,time) |
çå¬pdf渲ææåï¼msgä¿¡æ¯ï¼timeèæ¶ |
complete |
Function(status, msg, time) |
çå¬pdfå è½½å®æäºä»¶ï¼å 载失败ã渲ææåé½ä¼è§¦åãstatusæ两ç§ç¶æsuccessåerror |
render |
Function(currentNum, time, currentPageDom) |
çå¬pdf渲æè¿ç¨ï¼currentPageDomå½åå è½½çpdfçdom,currentNumå½åå è½½çpdf页æ°, |
zoom |
Function(scale) |
çå¬pdf缩æ¾ï¼scale缩æ¾æ¯ä¾ |
scroll |
Function(scrollTop,currentNum) |
çå¬pdfæ»å¨ï¼scrollTopæ»å¨æ¡é«åº¦,currentNumå½å页ç |
backTop |
Function |
çå¬åå°é¡¶é¨æé®çç¹å»äºä»¶åè° |
zoomEnable |
Function(flag) |
çå¬å
许缩æ¾ï¼flagï¼trueï¼false |
scrollEnable |
Function(flag) |
çå¬å
许æ»å¨ï¼flagï¼trueï¼false |
show |
Function |
çå¬pdfh5æ¾ç¤º |
hide |
Function |
çå¬pdfh5éè |
reset |
Function |
çå¬pdfh5è¿å |
destroy |
Function |
çå¬pdfh5éæ¯ |
æèµæ¦å
-
JayLin ï¿¥6.66
-
éä»å ï¿¥6.67
- åè ï¿¥8.80
- ææ¯å¤ªé³ ï¿¥29.99
- *å°æ³¢ ï¿¥1.00
- *é« Â¥9.99
- *æ Â¥9.99
- *å ï¿¥19.99
- *ç· Â¥5.00
- *è¶
Â¥20.00
- 3*Y ¥5.00
- *é³ Â¥5.00
- **é Â¥5.00
- A*r ¥1.23
- *客 ¥5.00
- *è¿ Â¥66.66
- *辰 ¥30.00
- *é» Â¥6.66+Â¥5.00
- **ç¦ Â¥6.66
- *ð Â¥6.66+Â¥1.00
- *é³ Â¥10.00
- èªéä¸ Â¥16.66+Â¥16.00
- *ç Â¥6.66
- *人 ¥5.00
- *ã Â¥5.20
- å*) Â¥5.00
- *1 ¥15.00
- *è¾ Â¥16.66
- *å Â¥10.00
- **强 ¥58.88
- E*y ¥6.60
- J*u ¥13.00
- A*a ¥50.00
- *ä¸ Â¥8.80
- j*y ¥9.99
- *å® Â¥6.66
- *æ¶ ï¿¥1.00
- *. ï¿¥10.00
- *⺠¥6.66
- *é¸ ï¿¥6.66
- a*r ï¿¥20.00