多个pdf和图片、word实现预览和下载
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="google" value="notranslate" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@media screen and (min-width: 960px) {
html,
body {
width: 960px;
margin: auto;
}
}
@media screen and (max-width: 960px) {
.canvasWrapp {
overflow-x: scroll;
}
}
@media print {
.btn {
display: none;
}
.label {
display: none;
}
canvas {
box-shadow: unset !important;
}
}
img {
width: 100%;
}
.label {
font-size: 20px;
font-weight: 700;
color: white;
margin-top: 20px;
background-color: green;
padding: 10px;
}
.canvasWrapp {
box-shadow: 0px 0px 6px #000;
}
.down {
border: green dashed 1px;
padding: 4px;
margin-top: 10px;
}
.down a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="btn">
<button>打印此页面</button>
</div>
<div class="down"></div>
</body>
<script src="./lib/pdf.js"></script>
<script src="./lib/pdf.worker.js"></script>
<script src="./lib/jszip.js"></script>
<script src="./lib/docx-preview.js"></script>
<script>
const files = [
"http://cos.dshvv.com/aegis/pdf1.pdf",
"http://cos.dshvv.com/aegis/img1.png",
"http://cos.dshvv.com/aegis/pdf2.pdf",
"http://cos.dshvv.com/aegis/word.docx",
"http://cos.dshvv.com/aegis/img2.png",
];
/*
* 渲染pdf
*/
const renderPdf = async (url) => {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
for (let index = 1; index < pdf.numPages + 1; index++) {
const page = await pdf.getPage(index);
// const desiredWidth = document.body.clientWidth
const desiredWidth = 960;
const viewportTemp = page.getViewport({ scale: 1 });
const scale = desiredWidth / viewportTemp.width;
const viewport = page.getViewport({ scale });
const canvas = document.createElement("canvas");
const canvasContext = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({ canvasContext, viewport });
const canvasWrapp = document.createElement("div");
canvasWrapp.className = "canvasWrapp";
canvasWrapp.append(canvas);
document.body.append(canvasWrapp);
}
};
/*
* 渲染word
* docx文档预览(只能转换.docx文档)
*/
const renderDoc = async (url) => {
const canvasWrapp = document.createElement("div");
const docRes = await fetch(url, { responseType: "arrayBuffer" });
const arrayBuffer = await docRes.arrayBuffer();
console.log(arrayBuffer);
const renderRes = await docx.renderAsync(arrayBuffer, canvasWrapp);
document.body.append(canvasWrapp);
};
/*
* 入口方法
*/
async function main() {
let downHtml = "";
const fileNameReg = /(.*\/)*([^.]+).*/gi;
for (const renderItem of files) {
const extension = renderItem.substring(renderItem.lastIndexOf(".") + 1);
const fileName =
renderItem.replace(fileNameReg, "$2") + "." + extension;
downHtml += `<div><a href='${renderItem}' down='${fileName}' target='_blank'>点击下载：${fileName} ⬇️</a></div>`;
// 渲染pdf或图片
const label = document.createElement("div");
label.className = "label";
label.innerText = fileName + "👇";
document.body.append(label);
if (extension === "png") {
const img = document.createElement("img");
img.src = renderItem;
document.body.append(img);
} else if (extension === "pdf") {
await renderPdf(renderItem);
} else if (extension === "docx") {
await renderDoc(renderItem);
}
}
// 渲染下载列表
const downEl = document.querySelector(".down");
downEl.innerHTML = downHtml;
}
main();
document.querySelector("button").onclick = function () {
print();
};
</script>
</html>
doc等前端无法解析的
可以借助后端，如
java如何实现word转PDF？
