要在PDF
.js Web视图中通过`
pdfjs/web/view
.html`预览PDF并
添加请求头，你需要创建一个HTML文件，并利用JavaScript控制加载PDF内容以及设置HTTP请求头。首先，在HTML页面的<head>部分引入PDF
.js库：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<title>PDF 预览</title>
<script src="https://cdn
js.cloudflare
.com/ajax/libs/pdf
.js/2
.16
.457/web/pdf
.js"></script>
</head>
<body>
<!
-- PDF Viewer Container
-->
<div id="viewer" style="width: 100%; height: 100vh;"></div>
<!
-- JavaScript 用于加载PDF并设置请求头
-->
<script>
async function loadPdf(
token) {
const url = '你的PDF链接'; // 替换为实际PDF URL
let config = {
mozjpeg: { progressive: true },
pdfBug: { enabled: true } // 开启调试模式
};
// 创建一个新的PDF查看器实例
const pdfViewer = await
PDFJS.getDocument({ url, cMapUrl: '/cmaps', cMapPacked: true });
// 设置请求头
const xhrOptions = {
headers: {
Authorization: `Bearer ${
token}` // 这里替换为你的
token
}
};
// 加载第一个页面并显示
pdfViewerpromise
.then(pdf => {
return pdf
.getPage(1); // 可以改为你想查看的页码
})
.then(page => {
const viewport = page
.getViewport(xhrOptions);
const container = document
.getElementById('viewer');
container
.width = viewport
.width;
container
.height = viewport
.height;
const scale = 1; // 可调整缩放比例
const canvas = document
.createElement('canvas');
canvas
.width = viewport
.width * scale;
canvas
.height = viewport
.height * scale;
container
.appendChild(canvas);
const context = canvas
.getContext('2d');
const renderContext = {
canvasContext: context,
viewport: viewport,
scale: scale,
rotation: 0
};
return page
.render(renderContext);
});
}
// 调用函数传入你的
token
loadPdf('your
-token-goes
-here'); // 替换为你实际的
token值
</script>
</body>
</html>
```
在这个例子中，我们首先设置了PDF配置，然后在`loadPdf`函数中，当你调用它并传入你的
Token时，它会自动为PDF加载请求
添加一个Authorization头。记得将URL和
Token替换为你实际的需求。
扫一扫
967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
