多个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？
多个pdf和图片、word实现预览和下载的更多相关文章
- Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...
- MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- 借助flexpaper实现word在线预览和打印
为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展 ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- HTML5开发笔记：图片上传预览
我们知道通过<input type="file">可以用来进行一个图片或者文件的上传,然而浏览器自带的一个缩略图预览的功能其实是相当不美观的,很多时候我们希望可以在上传 ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- html5 图片转base64预览显示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
随机推荐
- Unity性能优化-降低功耗,发热量,耗电量之OnDemandRendering篇
公司游戏项目,手机运行严重发烫,耗电量飞快.在暂时无法做其他美术性和技术性优化的情况下,我写了这个公司内部文档,并做了个实验,今天干脆公布出来,希望对大家有用. --官方文档: Unity - Scr ...
- elemengui分页
<!-- 分页模块 --> <template> <div class="block" style="margin-top:20px&quo ...
- JVM 垃圾回收调优的主要目标是什么？
JVM 垃圾回收调优的主要目标 JVM 垃圾回收调优的目标是为了提升应用的性能,优化垃圾回收过程中的停顿时间和吞吐量.调优的核心目标通常包括以下几点: 1. 减少垃圾回收的停顿时间 停顿时间(Stop ...
- 【经验】Ubuntu20.04虚拟机的网络问题｜在NAT模式没有网络连接图标，桥接模式正常
我的版本:Ubuntu20.04.04,iso是清华镜像站的release版本. 问题:NAT模式没有网络连接图标,或者图标闪一下就消失不见,并且无法获取IP地址:但是桥接模式的网络服务却是正常的. ...
- 操作系统：CPU工作模式-- 执行程序的三种模式
按照 CPU 功能升级迭代的顺序,CPU 的工作模式有实模式.保护模式.长模式,这几种工作模式下 CPU 执行程序的方式截然不同,下面我们一起来探讨这几种工作模式. 从一段死循环的代码说起 int m ...
- 楚慧杯Misc—复现
gza_CrackerCrack_me 追踪tcp流量 找到字典 保存字典,上流量一把梭 base64解密 特殊流量2 一把梭出个www.zip 打开,是个RSA <?php $cmd = @$ ...
- length与capacity
package javaBasic; public class DifferenceLengthCapacity { public static void main(String[] args) { ...
- 基于ROS2/MoveIt!的工业机械臂控制系统开发全攻略
1. 系统架构设计 1.1 系统组成模块 [Vision System] --> [Perception Node] | | [Gazebo Sim] <--> [ROS2 Cont ...
- golang unsafe遇上字符串拼接优化导致的bug
最近料理老项目的时候被unsafe坑惨了,这里挑一个最不易察觉的错误记录一下. 这个问题几乎影响近几年来所有的go版本,为了方便讨论我就用最新版的1.24.3做例子了. 线上BUG 我们有一个收集集群 ...
- L3-2、引导 AI 推理思考 —— 从条件判断到链式推理
一.什么是引导式推理(Self-Reasoning Prompt)? 引导式推理是一种提示工程技术,通过特定的提示结构引导AI模型进行逐步推理,使其能够像人类一样"思考"问题,而非 ...