PDF.js 支持通过 base64 数据直接加载 PDF 文件。为了实现这一功能，你需要先将 base64 编码的字符串转换为二进制数据，然后使用 PDF.js 的 API 来渲染 PDF 页面。
以下是一个简单的示例，展示如何使用 PDF.js 加载和渲染 base64 编码的 PDF 文件：
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Example</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<canvas id="the-canvas"></canvas>
<script>
// 此函数将 base64 编码的字符串转换为 Uint8Array 类型
function base64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
// 此函数渲染 PDF 页面
async function renderPdf(base64String) {
const pdfData = base64ToUint8Array(base64String);
// 使用 PDF.js 加载 PDF
const pdf = await pdfjsLib.getDocument({data: pdfData}).promise;
const page = await pdf.getPage(1); // 获取第一页
// 获取 canvas 元素
const canvas = document.getElementById('the-canvas');
const viewport = page.getViewport({scale: 1.5}); // 定义视口
canvas.width = viewport.width;
canvas.height = viewport.height;
const renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
// 渲染页面
await page.render(renderContext).promise;
}
// 假设 base64Pdf 是一个 base64 编码的 PDF 字符串
const base64Pdf = '...'; // 这里填入你的 base64 编码的 PDF
renderPdf(base64Pdf);
</script>
</body>
</html>
在这个示例中，base64ToUint8Array 函数将 base64 字符串转换为 PDF.js 能够处理的格式。renderPdf 函数负责加载 PDF 文档，获取页面，设置视口，并在 <canvas> 元素上渲染页面。
请确保替换 base64Pdf 变量中的 ... 为你的实际 base64 编码的 PDF 文件内容。
1220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
