Top Related Projects
Quick Overview
The pdfh5 project is a Python library that provides a simple and efficient way to extract text and images from PDF files and convert them into HTML5 format. It is designed to be a lightweight and easy-to-use tool for developers who need to work with PDF data in their applications.
Pros
- Cross-platform compatibility: The library is written in Python, which makes it compatible with a wide range of operating systems, including Windows, macOS, and Linux.
- Efficient PDF processing: The library uses a fast and reliable PDF parsing library, which allows it to process PDF files quickly and accurately.
- Customizable output: The library allows users to customize the output HTML5 format, including the ability to specify the layout, styling, and metadata.
- Easy integration: The library is easy to integrate into existing Python-based projects, with a simple and intuitive API.
Cons
- Limited PDF feature support: The library may not support all the features and functionality of PDF files, such as complex layouts, annotations, or interactive elements.
- Dependency on external libraries: The library relies on several external libraries, which may increase the complexity of the installation and setup process.
- Potential performance issues: Depending on the size and complexity of the PDF files being processed, the library may experience performance issues, especially when processing large or complex documents.
- Limited documentation: The project's documentation may be limited, which could make it more difficult for new users to get started with the library.
Code Examples
Here are a few examples of how to use the pdfh5 library:
from pdfh5 import PDF2HTML
# Convert a PDF file to HTML5
pdf = PDF2HTML('input.pdf')
html = pdf.convert()
with open('output.html', 'w') as f:
f.write(html)
This code converts the input.pdf file to an HTML5 format and saves the result to the output.html file.
from pdfh5 import PDF2HTML
# Extract text from a PDF file
pdf = PDF2HTML('input.pdf')
text = pdf.get_text()
print(text)
This code extracts the text content from the input.pdf file and prints it to the console.
from pdfh5 import PDF2HTML
# Extract images from a PDF file
pdf = PDF2HTML('input.pdf')
images = pdf.get_images()
for i, image in enumerate(images):
image.save(f'image_{i}.png')
This code extracts all the images from the input.pdf file and saves them as individual PNG files.
Getting Started
To get started with the pdfh5 library, follow these steps:
- Install the library using pip:
pip install pdfh5
- Import the
PDF2HTMLclass from thepdfh5module:
from pdfh5 import PDF2HTML
- Create a
PDF2HTMLobject and use its methods to process a PDF file:
# Convert a PDF file to HTML5
pdf = PDF2HTML('input.pdf')
html = pdf.convert()
with open('output.html', 'w') as f:
f.write(html)
- Customize the output by passing additional arguments to the
convert()method:
# Customize the output HTML5
pdf = PDF2HTML('input.pdf')
html = pdf.convert(layout='grid', metadata={'title': 'My PDF Document'})
with open('output.html', 'w') as f:
f.write(html)
- Explore the other methods provided by the
PDF2HTMLclass, such asget_text()andget_images(), to extract specific content from the PDF file.
For more detailed information and advanced usage, please refer to the project's documentation.
Competitor Comparisons
PDF Reader in JavaScript
Pros of pdf.js
- More comprehensive and feature-rich PDF rendering solution
- Widely adopted and battle-tested in production environments
- Extensive documentation and community support
Cons of pdf.js
- Larger file size and potentially higher resource usage
- Steeper learning curve for implementation and customization
- May be overkill for simple PDF viewing needs
Code Comparison
pdf.js:
pdfjsLib.getDocument('path/to/document.pdf').promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
// Render page
});
});
pdfh5:
new Pdfh5('#demo', {
pdfurl: 'path/to/document.pdf',
zoomEnable: true,
scrollEnable: true
});
Summary
pdf.js offers a more robust and feature-complete solution for PDF rendering, with extensive community support and documentation. However, it may be more complex to implement and have a larger footprint. pdfh5 provides a simpler, more lightweight option for basic PDF viewing needs, but with fewer advanced features and less widespread adoption.
Client/server side PDF printing in pure JavaScript
Pros of pdfmake
- Client-side PDF generation in pure JavaScript, allowing for dynamic PDF creation in browsers
- Extensive documentation and examples, making it easier for developers to get started
- Supports complex layouts, tables, and styling options for creating professional-looking documents
Cons of pdfmake
- Larger file size compared to pdfh5, which may impact load times for web applications
- Steeper learning curve due to its more comprehensive feature set
- Limited support for existing PDF manipulation (primarily focused on PDF creation)
Code Comparison
pdfmake:
var docDefinition = {
content: [
'Hello world',
{ text: 'Styled text', style: 'header' },
{ table: { body: [['Column 1', 'Column 2'], ['Value 1', 'Value 2']] } }
]
};
pdfMake.createPdf(docDefinition).download();
pdfh5:
var pdfh5 = new Pdfh5('#demo', {
pdfurl: './path/to/your.pdf'
});
pdfh5.renderPdf();
The code comparison shows that pdfmake is focused on creating PDFs from scratch using JavaScript objects, while pdfh5 is primarily used for rendering existing PDFs in the browser.
A JavaScript PDF generation library for Node and the browser
Pros of PDFKit
- More comprehensive PDF creation capabilities, allowing for complex document generation
- Better documentation and wider community support
- Supports both server-side (Node.js) and client-side (browser) usage
Cons of PDFKit
- Larger file size and potentially higher resource usage
- Steeper learning curve for beginners due to more advanced features
- Primarily focused on PDF creation rather than viewing
Code Comparison
PDFKit (PDF creation):
const PDFDocument = require('pdfkit');
const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello, world!');
doc.end();
PDFH5 (PDF viewing):
var pdfh5 = new Pdfh5('#demo', {
pdfurl: './test.pdf'
});
pdfh5.renderPdf(1);
Key Differences
- PDFKit is primarily for creating PDFs, while PDFH5 focuses on viewing PDFs in browsers
- PDFKit offers more control over PDF content and structure
- PDFH5 provides a simpler API for displaying PDFs in web applications
- PDFKit has broader platform support, including server-side usage
- PDFH5 is more lightweight and easier to integrate for basic PDF viewing needs
Client-side JavaScript PDF generation for everyone.
Pros of jsPDF
- More comprehensive PDF creation capabilities, including text, images, and vector graphics
- Wider browser compatibility and no external dependencies
- Larger community and more frequent updates
Cons of jsPDF
- Steeper learning curve due to more complex API
- Larger file size, which may impact page load times
- Limited built-in support for viewing PDFs in the browser
Code Comparison
pdfh5:
var pdfh5 = new Pdfh5('#demo', {
pdfurl: './path/to/pdf'
});
jsPDF:
var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('a4.pdf');
Summary
pdfh5 is primarily focused on PDF viewing within the browser, offering a simpler API for basic PDF display. jsPDF, on the other hand, provides a more powerful toolkit for creating PDFs from scratch, with extensive options for content manipulation. While pdfh5 excels in quick PDF viewing integration, jsPDF is better suited for applications requiring dynamic PDF generation and complex document creation.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
pdfh5.js
æé®é¢å¯ä»¥å Q群å¨è¯¢ï¼ææ¯äº¤æµç¾¤ï¼ä¹å¯ä»¥æ¢è®¨ææ¯ï¼å¦æå¼åææ¯è®¨è®ºå¾®ä¿¡ç¾¤å¯ä»¥é®ç¾¤ä¸»æå ¥å¾®ä¿¡ç¾¤

æ´æ°ä¿¡æ¯
-
2025.10.19 æ´æ°ï¼ v3.0.0å¤§çæ¬æ´æ°ï¼æ¯æå®æ¹pdf.js v5.4.296ï¼ç§»é¤svgæ¸²ææ¨¡å¼ï¼æ¢å¤æå 载模å¼ï¼æ°å¢å段å 载模å¼ï¼æ°å¢æ²ç®±éæï¼é²æ¢JavaScriptæ³¨å ¥çï¼ï¼æ°å¢å¯ç pdfæä»¶é¢è§ï¼ä¼åæå¿ç¼©æ¾ï¼åç»ä¼ç»§ç»ä¼åï¼ç®åè¿æ¯æé®é¢ï¼ã
-
æ ¹æ®éæ±éæ©å 载模å¼ï¼å°æä»¶ç´æ¥å ¨é¨å è½½ï¼ä¸çæä»¶ç¨æå è½½ï¼å¤§æä»¶ç¨å段å è½½ã妿忶é ç½®å¤ä¸ªæ¨¡å¼ï¼æä¼å 级ï¼å段å è½½ > æå è½½ > ä¼ ç»å è½½ã
pdfh5å¨çº¿é¢è§
https://pdfh5.gjtool.cn/pdfh5/password.pdf å¯ç 123456zxcv..
å¿«éå¼å§ï¼æä¸¤ç§æ¹å¼ï¼
ä¸ãscriptæ ç¾å¼å ¥æ¹å¼
- 1.å建div容å¨
<div id="demo"></div>
- 2.å¼å ¥pdfh5.jsï¼æä»¶ä¼èªå¨æ£æµå¹¶å è½½PDF.jsèµæºï¼
<script src="js/pdfh5.js"></script>
- 3.å®ä¾å
var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
pdfurl: "./default.pdf"
});
äºãnpmå®è£ æ¹å¼ï¼éåºäºvueï¼, reactä½¿ç¨æ¹æ³ç±»ä¼¼vueï¼example/react-testæ¯react使ç¨ç¤ºä¾ï¼
- 1.å®è£
npm install pdfh5
-
2.éæèµæºå¼ç¨
å°pdfh5æä»¶å¤¹ä¸çcmapsãiccsãstandard_fontsãwasmãjs/pdf.worker.min.js齿¾ç½®å°publicéæèµæºç®å½ä¸
-
3.使ç¨
<script setup lang="ts">
import Pdfh5 from "pdfh5"
import { ref, onMounted, onUnmounted } from 'vue'
const container = ref<HTMLElement>()
let pdfViewer: any = null
onMounted(async () => {
try {
console.log('Pdfh5æé 彿°:', Pdfh5);
// å建PDFæ¥çå¨
pdfViewer = new Pdfh5(container.value!, {
pdfurl: "/git.pdf",
textLayer: true,
workerSrc:"./pdf.worker.min.js",
cMapUrl: './cmaps/',
standardFontDataUrl: './standard_fonts/',
iccUrl: './iccs/',
wasmUrl: './wasm/'
});
console.log('PDFæ¥çå¨å建æå:', pdfViewer);
} catch (error) {
console.error('PDFåå§å失败:', error);
}
})
onUnmounted(() => {
if (pdfViewer && typeof pdfViewer.destroy === 'function') {
pdfViewer.destroy()
}
})
</script>
<template>
<div class="pdf-container" ref="container"></div>
</template>
<style scoped>
.pdf-container {
width: 100%;
height: 100vh;
}
</style>
APIæ¥å£æ¹æ³
å®ä¾å
- pdfh5å®ä¾åçæ¶åä¼ ä¸¤ä¸ªåæ°ï¼selectoréæ©å¨ï¼optionsé ç½®é¡¹åæ°ï¼ä¼è¿åä¸ä¸ªpdfh5å®ä¾å¯¹è±¡ï¼å¯ä»¥ç¨æ¥æä½pdfï¼çå¬ç¸å ³äºä»¶
var pdfh5 = new Pdfh5(selector, options);
| åæ°åç§° | ç±»å | åå¼ | æ¯å¦å¿ é¡» | ä½ç¨ |
|---|---|---|---|---|
| selector | HTMLElement | - | â | pdfh5ç容å¨,html DOMå ç´ å¯¹è±¡ |
| options | Object | - | à | pdfh5çé ç½®é¡¹åæ° |
optionsé ç½®é¡¹åæ°å表
- 示ä¾ï¼ é ç½®é¡¹åæ° pdfurl
var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
pdfurl: "./default.pdf"
});
åºç¡é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| pdfurl | String | PDFæä»¶å°å | - | pdfå°å |
| data | Array(arraybuffer) | PDFæä»¶æµæ°æ® | - | pdfæä»¶æµ ï¼ä¸pdfurläºéä¸(äºè¿å¶PDFæ°æ®ã使ç¨ç±»ååæ°ç»ï¼Uint8Arrayï¼å¯ä»¥æé«å å使ç¨çã妿PDFæ°æ®æ¯BASE64ç¼ç çï¼è¯·å 使ç¨atobï¼ï¼å°å ¶è½¬æ¢ä¸ºäºè¿å¶å符串ã) |
| password | String | PDFå¯ç | null | PDFå¯ç ï¼å¦ææå¯ç ä¿æ¤ï¼ |
| goto | Number | é¡µç æ°å | 0 | å è½½pdf跳转å°ç¬¬å 页ï¼0表示ä¸è·³è½¬ï¼ |
渲æé ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| scale | Number | æ¸²ææ¯ä¾ | 1 | pdf渲æçæ¯ä¾ |
| textLayer | Boolean | trueãfalse | false | æ¯å¦å¼å¯textLayerï¼å¯ä»¥å¤å¶ææ¬ |
| enableHWA | Boolean | trueãfalse | true | æ¯å¦å¯ç¨ç¡¬ä»¶å éï¼å¯¹å¾ç渲æå¾éè¦ |
| cMapUrl | String | å使 å°æä»¶è·¯å¾ | æºè½æ£æµ | è§£æpdfæ¶ï¼ç¹æ®æ åµä¸æ¾ç¤ºå®æ´åä½çcmapsæä»¶å¤¹è·¯å¾ |
| standardFontDataUrl | String | æ ååä½è·¯å¾ | æºè½æ£æµ | æ ååä½æä»¶è·¯å¾ |
| iccUrl | String | é¢è²é ç½®æä»¶è·¯å¾ | æºè½æ£æµ | é¢è²ç®¡çé ç½®æä»¶è·¯å¾ |
| wasmUrl | String | WebAssemblyæä»¶è·¯å¾ | æºè½æ£æµ | 髿§è½PDF渲æçWebAssemblyæä»¶è·¯å¾ |
| workerSrc | String | PDF.js Workerè·¯å¾ | æºè½æ£æµ | PDF.js Workeræä»¶è·¯å¾ |
交äºé ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| scrollEnable | Boolean | trueãfalse | true | æ¯å¦å 许pdfæ»å¨ |
| zoomEnable | Boolean | trueãfalse | true | æ¯å¦å 许pdfæå¿ç¼©æ¾ |
| resize | Boolean | trueãfalse | true | æ¯å¦å 许çªå£å¤§å°ååæ¶éæ°æ¸²æ |
æå è½½é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| lazyLoad | Boolean | trueãfalse | false | å¯ç¨æå 载模å¼ï¼åªæ¸²æå¯è§é¡µé¢ |
åæ®µå è½½é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| progressiveLoading | Boolean | trueãfalse | false | å¯ç¨å段å 载模å¼ï¼PDF.js宿¹æµå¼å è½½+æºè½å å管ç |
| chunkSize | Number | æ°åï¼åä½åè | 65536 | åå大å°ï¼é»è®¤64KB |
| maxMemoryPages | Number | æ°å | 5 | æå¤§å å页颿°ï¼è¶ è¿ä¼èªå¨æ¸ çè¿è·ç¦»é¡µé¢ |
| maxImageSize | Number | æ°åï¼åä½åè | 8388608 | æå¤§å¾ç大å°ï¼8388608ï¼å ¼å®¹iOS Safari |
| canvasMaxAreaInBytes | Number | æ°åï¼åä½åè | 8388608 | æå¤§canvasé¢ç§¯ï¼iOS Safariæµè§å¨canvaséå¶çº¦ä¸º16777216 |
UIç»ä»¶é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| loadingBar | Boolean | trueãfalse | true | æ¯å¦æ¾ç¤ºå è½½è¿åº¦æ¡ |
| pageNum | Boolean | trueãfalse | true | æ¯å¦æ¾ç¤ºå·¦ä¸è§é¡µç |
| backTop | Boolean | trueãfalse | true | æ¯å¦æ¾ç¤ºå³ä¸è§åå°é¡¶é¨æé® |
å ¶ä»é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| goto | Number | é¡µç æ°å | 0 | å è½½pdf跳转å°ç¬¬å 页 |
| enableHWA | Boolean | trueãfalse | true | æ¯å¦å¯ç¨ç¡¬ä»¶å éï¼å¯¹å¾ç渲æå¾éè¦ |
æå¿ç¼©æ¾é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| tapZoomFactor | Number | æ°å | 2 | åå»ç¼©æ¾åæ° |
| zoomOutFactor | Number | æ°å | 1.2 | 缩æ¾åå¼¹å å |
| animationDuration | Number | æ°åï¼å使¯«ç§ | 300 | 缩æ¾å¨ç»æç»æ¶é´ |
| maxZoom | Number | æ°å | 4 | æå¤§ç¼©æ¾åæ° |
| minZoom | Number | æ°å | 0.5 | æå°ç¼©æ¾åæ° |
| dampingFactor | Number | æ°å | 0.85 | é»å°¼å å |
注éç¼è¾å¨é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| annotationEditorMode | String | "NONE"ã"FREETEXT"ã"HIGHLIGHT"ã"INK"ã"STAMP"ã"SIGNATURE" | "NONE" | 注éç¼è¾å¨æ¨¡å¼ |
| editorParams | Object | ç¼è¾å¨åæ°å¯¹è±¡ | {} | 注éç¼è¾å¨åæ°é ç½® |
æ²ç®±å®å ¨é ç½®
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| sandboxEnabled | Boolean | trueãfalse | true | æ¯å¦å¯ç¨æ²ç®±æ¨¡å¼ï¼é²æ¢JavaScriptæ³¨å ¥åXSSæ»å» |
æ²ç®±é ç½®é项ï¼sandboxOptionsï¼
| åæ°åç§° | ç±»å | åå¼ | é»è®¤å¼ | ä½ç¨ |
|---|---|---|---|---|
| allowScripts | Boolean | trueãfalse | false | æ¯å¦å 许JavaScriptæ§è¡ |
| allowForms | Boolean | trueãfalse | true | æ¯å¦å 许表åäº¤äº |
| allowPopups | Boolean | trueãfalse | false | æ¯å¦å è®¸å¼¹çª |
| allowSameOrigin | Boolean | trueãfalse | true | æ¯å¦å è®¸åæºè®¿é® |
| sandbox | String | HTML sandbox屿§å¼ | "allow-same-origin allow-scripts" | HTML sandbox屿§ï¼æ§å¶æ²ç®±è¡ä¸º |
| referrerPolicy | String | referrerçç¥å¼ | "strict-origin-when-cross-origin" | å¼ç¨çç¥ï¼æ§å¶referrerä¿¡æ¯ |
æ²ç®±é 置示ä¾
var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
pdfurl: "./document.pdf",
sandboxEnabled: true,
sandboxOptions: {
allowScripts: false, // ç¦æ¢JavaScriptæ§è¡
allowForms: true, // å
许表å交äº
allowPopups: false, // ç¦æ¢å¼¹çª
allowSameOrigin: true, // å
è®¸åæºè®¿é®
sandbox: "allow-same-origin allow-scripts",
referrerPolicy: "strict-origin-when-cross-origin"
}
});
èµæºè·¯å¾é 置说æ
var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
pdfurl: "./document.pdf",
workerSrc: "./pdf.worker.min.js",
cMapUrl: "../cmaps/",
standardFontDataUrl: "../standard_fonts/",
iccUrl: "../iccs/",
wasmUrl: "../wasm/"
});
èµæºæä»¶è¯´æ
æä»¶éè¦ä»¥ä¸PDF.jsèµæºæä»¶ï¼
cmaps/- å使 å°æä»¶ï¼ç¨äºæ£ç¡®æ¾ç¤ºä¸æåä½ï¼standard_fonts/- æ åå使件ï¼ç¨äºPDFæ åå使¸²æï¼iccs/- é¢è²é ç½®æä»¶ï¼ç¨äºé¢è²ç®¡çåè²å½©ç©ºé´è½¬æ¢ï¼wasm/- WebAssemblyæä»¶ï¼ç¨äºé«æ§è½PDF渲æåå¾åè§£ç ï¼pdf.worker.min.js- PDF.js Workeræä»¶ï¼ç¨äºåå°PDFå¤çï¼
pdf请æ±ç¤ºä¾
1ãæä»¶å°å
new Pdfh5(document.querySelector("#demo"), {
pdfurl: "git.pdf"
});
2ãpdfæä»¶æµæè arraybufferå·²ç»å¾å°ï¼å¦ä½æ¸²æ
new Pdfh5(document.querySelector("#demo"), {
data: blob, //blob arraybuffer
});
methods æ¹æ³å表
åºç¡æ§å¶æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| show | Function | 带ä¸ä¸ªåè°å½æ° | pdfh5æ¾ç¤º |
| hide | Function | 带ä¸ä¸ªåè°å½æ° | pdfh5éè |
| destroy | Function | 带ä¸ä¸ªåè°å½æ° | pdfh5鿝 |
äº¤äºæ§å¶æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| setScrollEnabled | Boolean | trueãfalse | å¯ç¨/ç¦ç¨PDFæ»å¨ |
| setZoomEnabled | Boolean | trueãfalse | å¯ç¨/ç¦ç¨PDFæå¿ç¼©æ¾ |
| isScrollEnabled | - | æ åæ° | è·åæ»å¨ç¶æ |
| isZoomEnabled | - | æ åæ° | è·å缩æ¾ç¶æ |
| setProgressiveLoading | Boolean, Object | Boolean:æ¯å¦å¯ç¨, Object:é ç½®é项{chunkSize, maxMemoryPages} | è®¾ç½®åæ®µå è½½é ç½® |
| getProgressiveLoadingStatus | - | æ åæ° | è·ååæ®µå è½½ç¶æ |
| getMemoryUsage | - | æ åæ° | è·åå åä½¿ç¨æ åµ |
页é¢å¯¼èªæ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| goToPage | Number | Number:è¦è·³è½¬çpdfé¡µæ° | pdf跳转å°ç¬¬å 页ï¼pdfå è½½å®æå使ç¨ï¼ |
| nextPage | - | æ åæ° | 跳转å°ä¸ä¸é¡µ |
| prevPage | - | æ åæ° | 跳转å°ä¸ä¸é¡µ |
| scrollToTop | - | æ åæ° | æ»å¨å°é¡¶é¨ |
ç¼©æ¾æ§å¶æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| zoomIn | - | æ åæ° | æ¾å¤§PDF |
| zoomOut | - | æ åæ° | 缩å°PDF |
| setScale | Number | Number:ç¼©æ¾æ¯ä¾ | è®¾ç½®ç¼©æ¾æ¯ä¾ |
| setZoomEnabled | Boolean | trueãfalse | å¯ç¨/ç¦ç¨ç¼©æ¾æå¿ |
| isZoomEnabled | Boolean | æ åæ° | è·å缩æ¾ç¶æ |
| setZoomConstraints | Object | {minScale, maxScale, step} | 设置缩æ¾çº¦æ |
| getZoomConstraints | - | æ åæ° | è·å缩æ¾çº¦æ |
| isZooming | - | æ åæ° | æ£æ¥æ¯å¦æ£å¨ç¼©æ¾ |
æç´¢åè½æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| searchText | String | String:æç´¢å ³é®è¯ | æç´¢ææ¬ |
| findNext | - | æ åæ° | æ¥æ¾ä¸ä¸ä¸ªå¹é 项 |
| findPrevious | - | æ åæ° | æ¥æ¾ä¸ä¸ä¸ªå¹é 项 |
| clearSearch | - | æ åæ° | æ¸ é¤æç´¢é«äº® |
ä¸è½½åæå°æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| downloadPDF | String | String:ä¸è½½æä»¶åï¼é»è®¤"document.pdf" | ä¸è½½PDF |
| printPDF | - | æ åæ° | æå°PDFï¼æ¸²æææé¡µé¢å°æå°å®¹å¨ï¼ |
åæ®µå è½½æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| setProgressiveLoading | Boolean, Object | Boolean:æ¯å¦å¯ç¨, Object:é ç½®é项{chunkSize, maxMemoryPages} | è®¾ç½®åæ®µå è½½é ç½® |
| getProgressiveLoadingStatus | - | æ åæ° | è·ååæ®µå è½½ç¶æ |
| getMemoryUsage | - | æ åæ° | è·åå åä½¿ç¨æ åµ |
注éç¼è¾å¨æ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| setAnnotationEditorMode | String | String:ç¼è¾å¨æ¨¡å¼ï¼"NONE"ã"FREETEXT"ã"HIGHLIGHT"ã"INK"ã"STAMP"ã"SIGNATURE"ï¼ | 设置注éç¼è¾å¨æ¨¡å¼ |
| getAnnotationEditorMode | - | æ åæ° | è·åå½å注éç¼è¾å¨æ¨¡å¼ |
| addAnnotation | Object | Object:æ³¨éæ°æ®å¯¹è±¡ | æ·»å æ³¨é |
| removeAnnotation | String | String:注éID | å 餿³¨é |
| updateAnnotation | String, Object | String:注éID, Object:æ´æ°æ°æ® | æ´æ°æ³¨é |
| getAnnotations | - | æ åæ° | è·åæææ³¨é |
| clearAnnotations | - | æ åæ° | æ¸ é¤æææ³¨é |
åæ®µå è½½éè¦çæå¡ç«¯é 置说æ
1. Nginxé ç½®ï¼æ¨èï¼
åæ®µå è½½éè¦æå¡ç«¯æ¯æHTTPèå´è¯·æ±ï¼Range Requestsï¼ï¼Nginxé»è®¤æ¯æéææä»¶çèå´è¯·æ±ï¼ä½éè¦æ£ç¡®é ç½®ï¼
# åºç¡é
ç½® - æ¯æPDFæä»¶çèå´è¯·æ±
location ~* \.(pdf)$ {
# å¯ç¨èå´è¯·æ±æ¯æ
add_header Accept-Ranges bytes;
# 设置æ£ç¡®çMIMEç±»å
add_header Content-Type application/pdf;
# ç¼åæ§å¶ï¼å¯éï¼
expires 1h;
add_header Cache-Control "public, immutable";
# CORSæ¯æï¼å¦æéè¦è·¨åï¼
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
add_header Access-Control-Allow-Headers "Range, Content-Range";
# å¤çOPTIONS请æ±
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
add_header Access-Control-Allow-Headers "Range, Content-Range";
add_header Access-Control-Max-Age 86400;
return 204;
}
}
2. åå代çé ç½®
å¦æä½¿ç¨Nginxä½ä¸ºåå代çï¼éè¦é¢å¤é ç½®ï¼
location /api/pdf/ {
proxy_pass http://backend_server;
# ç¦ç¨ç¼å²ï¼æ¯ææµå¼ä¼ è¾
proxy_buffering off;
proxy_request_buffering off;
# 设置è¶
æ¶æ¶é´
proxy_read_timeout 300s;
proxy_connect_timeout 60s;
# 使ç¨HTTP/1.1
proxy_http_version 1.1;
proxy_set_header Connection "";
# ä¼ éåå§è¯·æ±å¤´
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# æ¯æèå´è¯·æ±
proxy_set_header Range $http_range;
proxy_set_header If-Range $http_if_range;
}
3. Apacheé ç½®
å¦æä½¿ç¨Apacheæå¡å¨ï¼
# å¯ç¨mod_rewriteåmod_headers
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule headers_module modules/mod_headers.so
# é
ç½®PDFæä»¶å¤ç
<LocationMatch "\.pdf$">
# å¯ç¨èå´è¯·æ±
Header set Accept-Ranges bytes
# 设置MIMEç±»å
Header set Content-Type "application/pdf"
# CORSæ¯æ
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Allow-Headers "Range, Content-Range"
# ç¼åæ§å¶
Header set Cache-Control "public, max-age=3600"
</LocationMatch>
4. Node.js Expressé ç½®
å¦æä½¿ç¨Node.jsä½ä¸ºå端ï¼
const express = require('express');
const app = express();
// æ¯æèå´è¯·æ±çä¸é´ä»¶
app.use('/pdf', (req, res, next) => {
// 设置CORS头
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Range, Content-Range');
// å¤çOPTIONS请æ±
if (req.method === 'OPTIONS') {
res.status(204).end();
return;
}
next();
});
// éææä»¶æå¡ï¼æ¯æèå´è¯·æ±
app.use('/pdf', express.static('pdf-files', {
setHeaders: (res, path) => {
if (path.endsWith('.pdf')) {
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Accept-Ranges', 'bytes');
}
}
}));
5. PHPé ç½®
å¦æä½¿ç¨PHPä½ä¸ºå端ï¼
<?php
// 设置CORS头
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, HEAD, OPTIONS');
header('Access-Control-Allow-Headers: Range, Content-Range');
// å¤çOPTIONS请æ±
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
http_response_code(204);
exit;
}
// æ¯æèå´è¯·æ±çPDFæä»¶æå¡
$file = $_GET['file'];
$filePath = 'pdf-files/' . $file;
if (file_exists($filePath)) {
$fileSize = filesize($filePath);
$range = $_SERVER['HTTP_RANGE'] ?? '';
if ($range) {
// å¤çèå´è¯·æ±
$ranges = explode('=', $range);
$offset = explode('-', $ranges[1]);
$start = intval($offset[0]);
$end = isset($offset[1]) ? intval($offset[1]) : $fileSize - 1;
header('HTTP/1.1 206 Partial Content');
header('Content-Range: bytes ' . $start . '-' . $end . '/' . $fileSize);
header('Content-Length: ' . ($end - $start + 1));
header('Content-Type: application/pdf');
header('Accept-Ranges: bytes');
$fp = fopen($filePath, 'rb');
fseek($fp, $start);
echo fread($fp, $end - $start + 1);
fclose($fp);
} else {
// 宿´æä»¶è¯·æ±
header('Content-Type: application/pdf');
header('Content-Length: ' . $fileSize);
header('Accept-Ranges: bytes');
readfile($filePath);
}
}
?>
6. é ç½®éªè¯
éªè¯æå¡ç«¯æ¯å¦æ£ç¡®æ¯æèå´è¯·æ±ï¼
# æµè¯èå´è¯·æ±
curl -H "Range: bytes=0-1023" -I http://your-server.com/path/to/file.pdf
# åºè¯¥è¿åï¼
# HTTP/1.1 206 Partial Content
# Accept-Ranges: bytes
# Content-Range: bytes 0-1023/1048576
# Content-Length: 1024
äºä»¶ç嬿¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| on | (String, Function) | Stringï¼çå¬çäºä»¶åï¼Functionï¼çå¬çäºä»¶åè° | çå¬äºä»¶ |
| off | String | Stringï¼è¦ç§»é¤çäºä»¶å | ç§»é¤äºä»¶çå¬ |
| trigger | (String, Object) | Stringï¼äºä»¶åï¼Objectï¼äºä»¶æ°æ® | 触åäºä»¶ |
ç¶æè·åæ¹æ³
| æ¹æ³å | ä¼ å | ä¼ ååå¼ | ä½ç¨ |
|---|---|---|---|
| getStatus | - | æ åæ° | è·åå½åç¶æä¿¡æ¯ |
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, pageTime, totalTime, currentPageDom) | çå¬pdf渲æè¿ç¨ï¼currentNumå½å页ç ï¼pageTimeåé¡µèæ¶ï¼totalTimeæ»èæ¶ï¼currentPageDomå½å页é¢DOM |
交äºäºä»¶
| äºä»¶å | åè°åæ° | ä½ç¨ |
|---|---|---|
| zoom | Function(scale) | çå¬pdf缩æ¾ï¼scaleç¼©æ¾æ¯ä¾ |
| zoomStart | Function(data) | çå¬ç¼©æ¾å¼å§ï¼dataå å«scaleåstartTime |
| zoomEnd | Function(data) | çå¬ç¼©æ¾ç»æï¼dataå å«scaleãstartScaleãscaleChangeãdurationç |
| pageLoaded | Function(data) | çå¬é¡µé¢å è½½å®æï¼å段å è½½ï¼ï¼dataå å«pageNumåmemoryUsage |
| pageCleaned | Function(data) | çå¬é¡µé¢æ¸ ç宿ï¼å段å è½½ï¼ï¼dataå å«pageNum |
| scroll | Function(data) | çå¬pdfæ»å¨ï¼dataå å«scrollTopæ»å¨æ¡é«åº¦åcurrentNumå½å页ç |
| backTop | Function | çå¬åå°é¡¶é¨æé®çç¹å»äºä»¶åè° |
æ§å¶äºä»¶
| äºä»¶å | åè°åæ° | ä½ç¨ |
|---|---|---|
| zoomEnabled | Function(flag) | çå¬ç¼©æ¾å¯ç¨ç¶æååï¼flagï¼trueï¼false |
| scrollEnabled | Function(flag) | ç嬿»å¨å¯ç¨ç¶æååï¼flagï¼trueï¼false |
| show | Function | çå¬pdfh5æ¾ç¤º |
| hide | Function | çå¬pdfh5éè |
| destroy | Function | çå¬pdfh5鿝 |
注éç¼è¾å¨äºä»¶
| äºä»¶å | åè°åæ° | ä½ç¨ |
|---|---|---|
| annotationAdded | Function(data) | ç嬿³¨éæ·»å ï¼dataå 嫿³¨éä¿¡æ¯ |
| annotationRemoved | Function(data) | ç嬿³¨éå é¤ï¼dataå 嫿³¨éä¿¡æ¯ |
| annotationUpdated | Function(data) | ç嬿³¨éæ´æ°ï¼dataå 嫿³¨éä¿¡æ¯ |
| annotationModeChanged | Function(mode) | ç嬿³¨é模å¼ååï¼mode为æ°çæ¨¡å¼ |
| annotationSelected | Function(data) | ç嬿³¨ééæ©ï¼dataå å«éä¸ç注éä¿¡æ¯ |
äºä»¶çå¬ç¤ºä¾
// çå¬PDFå è½½å®æäºä»¶
pdfh5.on("complete", function (status, msg, time) {
console.log("ç¶æï¼" + status + "ï¼æ»èæ¶ï¼" + time + "毫ç§ï¼æ»é¡µæ°ï¼" + this.totalNum, msg);
});
// ç嬿»å¨äºä»¶
pdfh5.on("scroll", function (data) {
console.log("scrollTop:" + data.scrollTop, "currentNum:" + data.currentNum);
});
// ç嬿³¨éç¼è¾å¨äºä»¶
pdfh5.on("annotationAdded", function (data) {
console.log("注é已添å ï¼", data);
});
pdfh5.on("annotationModeChanged", function (mode) {
console.log("æ³¨éæ¨¡å¼å·²åæ¢ä¸ºï¼", mode);
});
宿´ä½¿ç¨ç¤ºä¾
åºç¡ä½¿ç¨
var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
pdfurl: "./document.pdf",
scale: 1.5,
textLayer: true,
zoomEnable: true,
scrollEnable: true
});
é«çº§é 置示ä¾
var pdfh5 = new Pdfh5(document.querySelector("#demo"), {
// åºç¡é
ç½®
pdfurl: "./large-document.pdf",
password: "123456", // 妿æå¯ç ä¿æ¤
// 渲æé
ç½®
scale: 1.0,
textLayer: true,
enableHWA: true,
// 交äºé
ç½®
zoomEnable: true,
scrollEnable: true,
backTop: true,
pageNum: true,
loadingBar: true,
// æå¿ç¼©æ¾é
ç½®
tapZoomFactor: 2,
maxZoom: 4,
minZoom: 0.5,
// åæ®µå è½½é
ç½®ï¼å¤§æä»¶æ¨èï¼
progressiveLoading: true,
chunkSize: 65536,
maxMemoryPages: 5,
// 注éç¼è¾å¨é
ç½®
annotationEditorMode: "FREETEXT",
editorParams: {
freeTextColor: "#000000",
freeTextSize: 12,
inkColor: "#000000",
inkThickness: 1
},
// æ²ç®±å®å
¨é
ç½®
sandboxEnabled: true,
sandboxOptions: {
allowScripts: false,
allowForms: true,
allowPopups: false,
allowSameOrigin: true
},
// èµæºè·¯å¾é
ç½®
workerSrc: "./pdf.worker.min.js",
cMapUrl: "../cmaps/",
standardFontDataUrl: "../standard_fonts/",
iccUrl: "../iccs/",
wasmUrl: "../wasm/"
});
// äºä»¶çå¬
pdfh5.on("ready", function() {
console.log("PDFå è½½å®æï¼æ»é¡µæ°ï¼", this.totalNum);
});
pdfh5.on("annotationAdded", function(data) {
console.log("æ°æ³¨é已添å ï¼", data);
});
// æ¹æ³è°ç¨
pdfh5.setAnnotationEditorMode("HIGHLIGHT");
pdfh5.setProgressiveLoading(true, {chunkSize: 32768});
æèµæ¦å
- 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+Â¥8.80
- *å Â¥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
- æ¨æ§¿(**è) ï¿¥50.00
Top Related Projects
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot