多个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& ...
随机推荐
- @Accessors lombok注解用法
最近学习代码看到很多有趣的注解:慢慢整理下: @Accessors注解 @Accessors注解官方给出的解释是:面向getter和setter的更流畅的API.用于生成和查找getter和sette ...
- 如何在 MySQL 中实现读写分离？
如何在 MySQL 中实现读写分离? 在 MySQL 中实现读写分离主要目的是为了提升数据库的性能和扩展性,将读请求和写请求分配到不同的服务器上,减轻主数据库的压力.通常,写请求会发送到主库,而读请求 ...
- QT C++ 实现数据类与 json 的转换
QT 提供了 QJsonDocument.QJsonObject.QJsonArray.QJsonValue 等类用于 JSON 的解析和转换.QJsonValue 支持的数据类型包括:bool.do ...
- c#使用内存映射像处理内存一样去快速处理文件
在 .NET Core 中,`System.IO.MemoryMappedFiles.MemoryMappedFile` 类提供了对内存映射文件的支持.通过将文件映射到内存,你可以在应用程序中直接访问 ...
- 凯亚IOT平台在线测试MQTT接入设备
一.概述 凯亚 (Kayak)开通了MQTT端口425,以便给感兴趣的同僚进行测试,下面将在此篇文章讲解如何平台接入设备进行MQTT通信 凯亚 (Kayak) 是什么? 凯亚(Kayak)是基于.NE ...
- Java Collection集合的基本操作
目录 Collection接口常用方法 存放String类型 存放自建对象 Collection和Collections的区别 Collection接口常用方法 int size();//集合大小 b ...
- 代码随想录第二天 | Leecode 209. 长度最小的子数组、59. 螺旋矩阵II
Leecode 209 长度最小的子数组 题目链接:https://leetcode.cn/problems/minimum-size-subarray-sum/ 题目描述 给定一个含有 n 个正整数 ...
- 成语答题小程序v3.0
自从开源成语答题小程序以来不断完善功能,并且不断修复bug,成语答题小程序v3版本完善了很多功能 1.增加了原生模板广告,设置原生模板广告后可以设置首页或答题页是否显示原生模板广告 2.增加了背景设置 ...
- 【安装】Ubuntu20.04下安装ROS的完整过程（内含已装好ROS的虚拟机、虚拟机创建过程、ROS安装过程及全过程录屏）
现成的虚拟机 为方便大家学习,如果安装ROS遇到的问题实在太多,也可以直接下载我提供给大家的.已经安装好ROS的Ubuntu虚拟机:下载链接, 提取码:1030. 虚拟机的使用说明也在这个文件夹下,虚 ...
- C++ 迭代器（STL迭代器）iterator详解
要访问顺序容器和关联容器中的元素,需要通过"迭代器(iterator)"进行,迭代器是一个变量,相当于容器和操作容器的算法之间的中介.迭代器可以指向容器中的某个元素,通过迭代器就可 ...