使用 JS 提取 Pdf 指定范围页面

How to Extract Pages from a PDF and Render Them with JavaScript

代码

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pdf Modification</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="inputarea">
    <input type="file" accept=".pdf" name="pdfinput" id="pdfinput">
    <input type="text" id="rangeSelector" placeholder="eg. 1-3">
    <button id="extractBtn">Extract</button>
  </div>

  <iframe id="pdfFrame"></iframe>

  <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
  <script src="./script.js" type="module"></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const input = document.getElementById("pdfinput");
const pdfFrame = document.getElementById("pdfFrame");
const rangeSelector = document.getElementById("rangeSelector");
const extractBtn = document.getElementById("extractBtn");

let pdfArrayBuffer;

// Read our file in async/await fashion
function readAsyncFile(file) {
	return new Promise((resolve, reject) => {
		let reader = new FileReader();
		reader.onload = () => {
			resolve(reader.result);
		};
		reader.onerror = reject;
		reader.readAsArrayBuffer(file);
	});
}

// Render the pdf in an Iframe
function renderPdf(arrayBuffer) {
	const tempBlob = new Blob([new Uint8Array(arrayBuffer)], {
		type: "application/pdf",
	});
	const docUrl = URL.createObjectURL(tempBlob);
	pdfFrame.src = docUrl;
}

// Select page range
function range(start, end) {
	let length = end - start + 1;
	return Array.from({ length }, (_, i) => start + i - 1);
}

// Get file from filePicker
input.addEventListener("change", async (e) => {
	const files = e.target.files;
	if (files.length > 0) {
		pdfArrayBuffer = await readAsyncFile(files[0]);
		renderPdf(pdfArrayBuffer);
	}
});

// Start extraction
extractBtn.addEventListener("click", async () => {
	const rawRange = rangeSelector.value;
	const rangeList = rawRange.split("-");
	const pdfSrcDoc = await PDFLib.PDFDocument.load(pdfArrayBuffer);
	const pdfNewDoc = await PDFLib.PDFDocument.create();
	const pages = await pdfNewDoc.copyPages(
		pdfSrcDoc,
		range(Number(rangeList[0]), Number(rangeList[1])),
	);
	pages.forEach((page) => pdfNewDoc.addPage(page));
	const newPdf = await pdfNewDoc.save();
	saveAs(new Blob([newPdf], { type: "application/pdf" }), "extracted.pdf");
});

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.inputarea {
  margin: 5rem 0 3rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

#rangeSelector {
  margin-left: 2rem;
}

#pdfFrame {
  border-style: none;
  border-spacing: 0;
  width: 50%;
  height: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}

button {
  margin: 0 0 0 0.5rem;
}

笔记

<iframe>

frameborder 属性已被弃用，用 CSS 属性 border 替代；

cellspacing 属性已被弃用，用 CSS 属性 border-spacing 替代。

<input type="file">

通过 accept 属性，指定可接受的文件类型，格式 accept=".pdf" 。

<script src="" type="module">

使用 module 类型的 JS 语法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function readAsyncFile(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = reject
    reader.readAsArrayBuffer(file)
  })
}

该函数使用了期约（Promise），它是 JS 异步编程的基础。

使用 JS 提取 Pdf 指定范围页面

代码

笔记

See Also: