js 实现 pdf 在线预览 打印 【完整版】

最新推荐文章于 2024-09-14 07:03:50 发布
最新推荐文章于 2024-09-14 07:03:50 发布
阅读量5.3k 收藏 3
点赞数
分类专栏： Java - Programming
本文介绍了一种利用pdf.js库实现网页上PDF文件预览和下载的方法，详细讲解了代码实现过程，包括如何设置HTML结构、添加样式及JavaScript交互，以实现点击标题跳转至PDF预览页面并提供下载功能。
摘要由CSDN通过智能技术生成

今天想写的内容   因为网上有用的太少了，自己半摸索的实现了【文末有源码代码下载链接】。

1.说下需求：点击标题  跳转  预览的pdf  页，下载功能 可选【最好有】。

 2.实现结果 ：

 

 

3.代码实现：

依赖pdf.js  【需要下载完整  控件】

下载官网：http://mozilla.github.io/pdf.js/

点击  ‘Download ’   到下载页

 

git 克隆  或者下载。

下载后文件长这样：

【重点在后面   项目如何部署组装】

1.新建一个空项目   把文件放到项目根目录下：

红色圈里 是官网下载的  就改个文件名字，然后拖进项目里，完全不用动里面任何文件记住，有需要另说。

绿色是我写的【dowwn.html   是测试文件;static  放pdf  文件】 下面贴代码：

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;
 
        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;
 
        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>
<ul>
    <li dataSrc = 'KD-122LA火灾探测报警器说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-212LA可燃气体探测器说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-216LA可燃气体探测器说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'Kd-122LA_KD-601系统遥控器使用说明.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-602LA_SOS一键救助使用说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA  SOS一键救助使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-701LA_溢水探测器使用说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA  溢水探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-702LA红外人体移动探测器说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-703LA_门窗探测器使用说明书.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA  门窗探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'KD-805A_WiFi系统主机使用说明书_V1.00.pdf' onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A  WiFi系统主机使用说明书_V1.00</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = 'WIFI智慧家庭安防系统操作说明书_v0.01.pdf'onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span>  <img class="next" src="img/next.png" alt="">
    </li>
 
 
</ul>
<script src="js/jquery.min.js"></script>
<script>
    function fun(e){
     // console.log(e);
     var dataSrc = $(e).attr('dataSrc');
     //    console.log(dataSrc);
     //    sessionStorage.setItem('dataSrc',dataSrc);
     //    window.location.href='index.html'
        var urlSrc =  'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
        $.ajax({
            url: urlSrc,
            type: "get",
            success: function(xhr, data){
                if (navigator.userAgent.indexOf('Android') > -1) {
                    //判断移动端是android 还是ios ，若是android 则要借助pdf插件
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                } else {
                    //ios直接打开pdf
                    //window.location.href = url;
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                }
            },
            error: function(){
                //window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
                window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
            }
        });
    }
</script>
</body>
 
</html>

 

完毕！

注意：
本地测试不了，http://testweixin.kingdun.net.cn   是我们运维小哥哥发版后的服务器。我写本地不对，你也可以 node.js 自己搭个服务器。

注释：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?    直接跳转到 万能的pdf 组件里的html 页，该有的  国际化和下载打印功能   人家都写好了！

【兼容性】：苹果手机：直接预览，手机系统自带的，但是 不能下载 （有得必有失），可以在 别的应用中打开  例如  wps。
                       安卓：可预览 ，可下载，在手机默认浏览器打开  可支持下载，本人小米8，uc浏览器 下载乱码，但是 小米自带浏览器 可下载pdf文件。
交差。
 

 彩蛋：down.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;
 
        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;
 
        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>
 
<a href="static/1.pdf">00001</a>
 
 
</body>
 
</html>

 

哈哈，直接a 标签   href 跳转  pdf文件；也是ok的哦！【苹果手机：直接预览；；；安卓:下载 链接 】

【下载传送门】：

https://download.csdn.net/download/qiuyan_f/10592556

 

本文原文地址：https://blog.csdn.net/qiuyan_f/article/details/81511303

 

 

Roger_CoderLife
关注
专栏目录
PDFJS在线预览
08-21
PDFJS在线预览自己改过的demo
pdfjs解决前端需要预览打印下载pdf的一款插件
01-09
一款解决pdf预览下载打印的集成插件，可以自行参考官网教程，官网下载的太慢了，git也拉不下来
PDFViewer：一款强大的PDF在线预览工具
最新发布
gitblog_00488的博客
09-14 1016
PDFViewer：一款强大的PDF在线预览工具 项目地址:https://gitcode.com/gh_mirrors/pdfvi/PDFViewer 项目介绍 PDFViewer 是一款开源的PDF在线预览工具，旨在为用户提供一个简单、高效的方式来在网页上展示PDF文件。无论是个人开发者还是企业用户，都可以轻松地将PDFViewer集成到自己的项目中，实现PDF文件的在线浏览功能。PDFVie...
pdf.js pdf在线预览组件，支持IE,chrome
12-11
pdf.js pdf在线预览组件，支持IE,chrome多个浏览器，支持下载、打印功能。
JS实现PDF在线预览下载
07-20
通过JS实现PDF在线预览和下载功能，代码简单易懂，添加到自己的代码就可用
PDF在线预览懒汉专用简单粗暴版
02-21
PDF在线预览 pdf.js的包 使用教程 操作说明 言简意赅 简单易上手
pdf.js Demo 纯js实现PDF在线预览及打印
11-10
pdf.js Demo 纯js实现PDF在线预览及打印 可控制页面缩放 打开本地文件
js实现pdf在线预览
07-06
js实现pdf格式在线预览 自己测试通过，不错的工具类，希望能帮助到需要的人 以下是书的内容 给编辑的话： 1、封面建议做得活跃点，比如放授课的场景，放作者的大幅肖像。请考虑是否制作勒口与腰线。 2、内容排版请排得松一些，以便阅读起来轻松一点。 3、文中有许多标粗或放大的字，是关键词语，请想办法突出处理。 4
使用pdfjs实现在线预览pdf
瓜皮伦的博客
10-14 7552
在工作中可能会遇到前端展示pdf文件进行预览并提供下载的需求场景,例如操作指引,这个时候需要寻找一款实现该功能的插件,以pdjjs举例子。
js实现PDF在线预览
m0_37618340的博客
09-16 1万+
这几天在项目中遇到一个PDF文件在线预览的功能，在网上找了很多的demo都跑不通，被逼无奈，只好去看PDFproject.js的官方api,经过我用着翻译软件阅读者英文的api，突然发现这个功能只需要几行代码就可以搞定,而网上的demo都是给了一大堆的代码，让人不知道那一句是关键。所以小编在这里特此把最简单的代码分享给大家。 第一步：导入pdfobject.min.js            ...
js实现html中的pdf文件的在线预览、下载、打印等功能
07-06
包括js资源，及简单demo实现：html中的pdf文件预览
pdf.js在线预览demo
01-06
本例是pdf.js的demo，可在浏览器运行，无需其他任何环境配置。
PDF.jsPDF文件在线预览
07-22
通过iframe标签引入view.html,传入参数file=文件名，即可实现PDF.jsPDF文件在线预览
PDF.js在线预览打印
06-20
PDF.js在线预览、打印及下载(纯js实现PDF在线预览、打印及下载)，可控制预览、打印及下载等按钮操作；
js在线预览wordpdf.rar
01-10
总的来说，"js在线预览wordpdf.rar"提供了一个完整的解决方案，使Web开发者能够方便地在网站上实现PDF和Word文档的在线预览功能，同时也涉及到了JavaScript库的使用、多线程处理、安全性和性能优化等多个重要知识点...
【SpringBoot】40、SpringBoot中使用Aspose将文件转为PDF实现在线预览
热门推荐
Asurplus
01-02 21万+
一、简介 Aspose 是 .NET 和 Java 开发组件以及为 Microsoft SQL Server Reporting Services 和 JasperReports 等平台提供渲染扩展的领先供应商。它的核心重点是提供最完整和最强大的文件管理产品。Aspose 产品支持一些商业上最流行的文件格式，包括：Word 文档、Excel 电子表格、PowerPoint 演示文稿、PDF 文档、Flash 演示文稿和项目文件。 二、下载 下载 Aspose 的依赖 Jar 包可以通过一下仓库下载：Aspo
Vue项目实现在线预览pdf，并且可以批量打印pdf的两种方法
qq_37635012的博客
07-18 6029
同时在样式里设置如下打印样式，也是为了控制不多印空白页的问题。2.预览页面里，有个吸顶效果，然后这个pdf后端返回给我的是一个地址，我们预览pdf用到的插件是vue-office-pdf，由于有多个pdf，所以需要遍历，你会看到v-for=“pdf in pdfsArray”。这里需要注意的是，我们在打印时需要取消默认的页眉页脚的勾，然后将边距改为无，这样就能保证打印的页面无页眉页脚且是居中显示内容的了，目标打印机选择好，点击"打印"就能打了。
vue3 实现pdf在线预览，但禁止下载和打印，怎么实现
05-24
要实现在线预览 PDF 文档并禁止下载和打印，可以使用 PDF.js 这个开源的 JavaScript 库来实现。PDF.js 可以在浏览器中异步加载和渲染 PDF 文件，同时还提供了控制 PDF 文件显示和打印的功能。 具体实现步骤如下： 1. 引入 PDF.js 库。可以从官网 https://mozilla.github.io/pdf.js/ 下载最新版的 PDF.js，然后在 HTML 页面中引入 js 文件。 ```html <script src="path/to/pdf.js"></script> ``` 2. 加载 PDF 文件。可以使用 PDF.js 提供的 `pdfjsLib.getDocument(url)` 方法来异步加载 PDF 文件，并且通过 `Promise` 返回加载状态。 ```javascript var url = 'path/to/pdf/file.pdf'; pdfjsLib.getDocument(url).promise.then(function(pdf) { // PDF 文件加载成功 }); ``` 3. 渲染 PDF 文件。通过 `pdf.getPage(pageNumber)` 方法获取 PDF 页面，然后使用 `page.getTextContent()` 方法获取页面的文本内容。最后通过 `pdfjsLib.renderTextLayer()` 方法渲染文本内容到页面上。 ```javascript pdf.getPage(1).then(function(page) { var viewport = page.getViewport({ scale: 1 }); var textLayer = document.createElement('div'); textLayer.className = 'textLayer'; document.getElementById('pdfContainer').appendChild(textLayer); page.getTextContent().then(function(textContent) { pdfjsLib.renderTextLayer({ textContent: textContent, container: textLayer, viewport: viewport, textDivs: [] }); }); }); ``` 4. 禁止下载和打印。可以使用 CSS 样式来控制 PDF 文件的显示和打印。通过下面的样式可以隐藏 PDF 文件的下载和打印按钮。 ```css .pdfViewer .toolbarButton.download, .pdfViewer .toolbarButton.print { display: none !important; } ``` 提示：为了保证安全性，禁止下载和打印功能是通过前端控制实现的，无法完全阻止用户直接下载或打印 PDF 文件。如果需要更高的安全性，建议在服务器端对 PDF 文件进行加密处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值