pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析

官网地址：http://mozilla.github.io/pdf.js/

  • 下载pdf.js插件

  • 解压后有 web 和 build 两个文件夹 如图

　　　

  • 运行示例  将解压后的文件直接仍到项目路径下

　　访问 ip:port/文件夹名称/web/viewer.html 
　　显示的是 web 文件夹下的compressed.tracemonkey-pldi-09.pdf

　　

  •  修改默认打开PDF 

　　

我们只用修改viewer.js文件中的pdf路径参数即可：
var DEFAULT_URL = ‘09.pdf’;
如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：
var DEFAULT_URL = ’ ../doc/ 09.pdf’;

viewer.html可以通过页面参数传值的方式加载pdf文件，比如我们想打开09.pdf文件的话，只需要这样：
先把viewer.js中的参数修改为空：
var DEFAULT_URL = ”;
然后把url改写为参数传值：
http://127.0.0.1:8080/pdfjs/web/viewer.html?file=09.pdf
如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：
http://127.0.0.1:8080/pdfjs/web/viewer.html?file=../doc/09.pdf
参考地址https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#file

  • 获取服务器上的PDF文件 

　　

通过页面参数传值的方式加载pdf文件
file的值需要URLEncode编码 指向服务器端
例如：
http://xxxxx.com:89/demo/fileupdownfud=1&rid=4&isweb=1&iswebshow=1&dbid=01&filepath=fj_ob_item/Y201809/11.pdf
URLEncode编码：为
http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
访问地址为：
http://127.0.0.1:8080/pdfjs/web/viewer.html?file=http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
————————————————
版权声明：本文为CSDN博主「三年二班Pit」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/l_ai_yi/article/details/82388497

PDF.js默认好像是不能跨域请求 

 将viewer.js 中的错误提示注释掉即可

try {
var viewerOrigin = new URL(window.location.href).origin || 'null';
if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
return;
}
var fileOrigin = new URL(file, window.location.href).origin;
//跨域请求错误提示
//if (fileOrigin !== viewerOrigin) {
//throw new Error('file origin does not match viewer\'s');
//}
} catch (ex) {
var message = ex && ex.message;
PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
PDFViewerApplication.error(loadingErrorMessage, { message: message });
});
throw ex;
}

  • 服务端代码
//跨域请求

String s0 = "C:11.pdf"

response.setHeader("Access-Control-Allow-Origin", "*");

File file = new File(s0);

response.setContentLength((int) file.length());

response.setHeader( "Content-Disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));// 设置在下载框默认显示的文件名

response.setContentType("application/octet-stream");// 指明response的返回对象是文件流

// 读出文件到response

// 这里是先需要把要把文件内容先读到缓冲区

// 再把缓冲区的内容写到response的输出流供用户下载

FileInputStream fileInputStream = new FileInputStream(file);

BufferedInputStream bufferedInputStream = new BufferedInputStream(fileInputStream);

OutputStream outputStream = response.getOutputStream();

byte buffer[] = new byte[];

int len = ;

while ((len = bufferedInputStream.read(buffer)) > ) {

    outputStream.write(buffer, , len);

}

// 人走带门

bufferedInputStream.close();

outputStream.flush();

outputStream.close();

案例二：

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>testPdf</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/pdfjs2/build/pdf.js"></script>

    <style type="text/css">

        .lightbox {

            position: fixed;

            top: 0px;

            left: 0px;

            height: 100%;

            width: 100%;

            z-index: 7;

            opacity: 0.3;

            display: block;

            background-color: rgb(0, 0, 0);

            display: none;

        }

        .pop, iframe {

            position: absolute;

            left: 50%;

            top: 0;

            width: 893px;

            height: 100%;

            margin-left: -446.5px;

            z-index: 9;

        }

    </style>

    <script type="text/javascript">

        function showPdf(isShow) {

            var state = "";

            if (isShow) {

                state = "block";

            } else {

                state = "none";

            }

            var pop = document.getElementById("pop");

            pop.style.display = state;

            var lightbox = document.getElementById("lightbox");

            lightbox.style.display = state;

        }

        function close() {

            showPdf(false);

        }

        function pd(dd) {

            $("#" + dd)[0].contentWindow.print();

        }

    </script>

</head>

<body>

    <ul>

        <li><a href="../pdfjs2/web/viewer.html?file=../DownFile/430000447746159F19030038催缴通知书.pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li>

        <li><a href="../pdfjs2/web/viewer.html?name=../DownFile/430000447746159F19030038事前告知书.pdf" target="pdfContainer" onclick="showPdf(true)">0002_pdf</a></li>

    </ul>

    <div class="lightbox" id="lightbox"></div>

    <div id="pop" class="pop" style="display: none;">

        <a href="javascript:close()" style="

            position: absolute;

            right: -90px;

            display: inline-block;

            width: 80px;

            height: 30px;

        " id="close">关闭</a>

        @*<a href="#" onclick="pd('pdfContainer')" style="

           position:absolute;

           right :-90px;

           display :inline-block;

           width :80px;

           height: 30px;">打印</a>*@

        <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>

    </div>

</body>

</html>

案例三：

直接使用iframe

<iframe id="pdf_page_1" name="pdf_page"  style="width:795px;height:789px" frameborder="0" ></iframe>

赋值显示：

  param = "chId=" + $("#chId").val() + "&unitId=" + unId;

    pdfurl = "/OverrunPunishment/ApprovedBookData?" + param;

    //pdfurl为文件流，使用encodeURIComponent()函数可把字符串作为 URI 组件进行编码。

    $("#pdf_page_1").attr('src', "../pdfjs/web/viewer.html?file=" + encodeURIComponent(pdfurl) + "");

后台将pdf文档转文件流方法：

 public string ApprovedBookData(string chId, string unitId)

        {

            InstrumentInfo instr = new InstrumentInfo();

            string name = "";

            FileStream fs = null;

            if (Request.Cookies["LoginValue"] == null) Response.Redirect("../Login/LoginPage");

            try

            {

                instr = ApprovedDataUtil.ExportPdfText(chId, unitId);

                string path = instr.fileName.Replace("\\", "/");

                fs = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);//读取生成的pdf文件

                byte[] buffer = new byte[fs.Length];

                fs.Position = ;

                fs.Read(buffer, , (int)fs.Length);

                Response.Clear();

                Response.AddHeader("Content-Length", fs.Length.ToString());

                Response.ContentType = "application/pdf";

                Response.AddHeader("Content-Disposition", "inline;FileName=抄告文书.pdf");

                Response.BinaryWrite(buffer);

                Response.OutputStream.Flush();

                Response.OutputStream.Close();

                name = fs.Name;

                fs.Close();

            }

            catch (Exception ex)

            {

                CSysCfg.WriteLog("获取文书异常：" + ex.Message);

            }

            return name;

        }

 注：获取流时，需要用encodeURIComponent将url转换成encode编码，放在file里。

使用pdf.js实现前端页面预览pdf文档，解决了跨域请求的更多相关文章

  1. 使用pdf.js在移动端预览pdf文档

    pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...

  2. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  3. Java实现web在线预览office文档与pdf文档实例

    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...

  4. IOS 预览word文档的集中方式

    在iPhone中可以很方便的预览文档文件,如:pdf.word等等,这篇文章将以PDF为例.介绍三种预览PDF的方式,又分别从本地pdf文档和网络上的pdf文档进行对比. 预览本地PDF文档: 1.使 ...

  5. Asp.Net在线预览Word文档的解决方案与思路

    前几天有个老项目找到我,有多老呢?比我工作年限都长,见到这个项目我还得叫一声前辈. 这个项目目前使用非常稳定,十多年了没怎么更新过,现在客户想加一个小功能:在线预览Word文档. 首先想到的是用第三方 ...

  6. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  7. 在Outlook中查看预览SharePoint文档库的文档

    本文概况 阅读时间: 约2分钟 适用版本:SharePoint Server 2010及以上 面向用户:普通用户,管理员 难度指数:★★☆☆☆ 在日常工作中,总有一些常用的文档需要经常打开查看,其实我 ...

  8. 通过程序预览Office文档

    我承认,标题是夸大了,就是为了吸引注意力.这里只有Word文档和Excel文档的预览代码. Word://此部分来源:http://princed.mblogger.cn/posts/11885.as ...

  9. 点击<a>页面跳转解决办法/跨域请求，JSONP

    有些时候做的东西刚好要用到链接,但又不需要去链接,只需要对onclick事件进行处理,但它却这样子写 <a href="#" onclick="gettext()& ...

随机推荐

  1. redis-cli

    redis-cli --stat //监控key的数量,内存占用 redis-cli --scan //列出所有的key redis-cli --bigkeys //列出占用内存较大的key redi ...

  2. python 如何判断一组数据是否符合正态分布

    正态分布: 若随机变量x服从有个数学期望为μ,方差为σ2 的正态分布,记为N(μ,σ) 其中期望值决定密度函数的位置,标准差决定分布的幅度,当υ=0,σ=0 时的正态分布是标准正态分布 判断方法有画图 ...

  3. P2882 Face The Right Way G 题解

    题目 Farmer John has arranged his N \((1 ≤ N ≤ 5,000)\) cows in a row and many of them are facing forw ...

  4. AIX系统下挂载外置存储

    连接盘柜后在盘柜里映射好分区. 1.扫描硬件才能发现盘柜映射的容量 ,命令cfgmgr 2.查看在 AIX 系统下能否认到盘柜的分区. 命令:lsdev -Cc disk 3.查看物理卷(pv),命令 ...

  5. redis源码学习之工作流程初探

    目录 背景 环境准备 下载redis源码 下载Visual Studio Visual Studio打开redis源码 启动过程分析 调用关系图 事件循环分析 工作模型 代码分析 动画演示 网络模块 ...

  6. mysql 漏洞利用与提权

    判断MySQL服务运行的权限 1.查看系统账号,如果出现MySQL这类用户,意味着系统可能出现了降权. 2.看mysqld运行的priority值. 3.查看端口是否可外联. MySQL密码获取与破解 ...

  7. Mysql---搭建简单集群，实现主从复制，读写分离

    参考博客:https://blog.csdn.net/xlgen157387/article/details/51331244 A. 准备:多台服务器,且都可以互相随意访问root用户,都可以随意进行 ...

  8. 性能测试必备知识（4）- 使用 stress 和 sysstat

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html stress 介绍 Linux 系统压力测试 ...

  9. k_means算法+python实现

    文章目录 一.原理 二.算法步骤 三.实例如下: 四.python代码实现: 一.原理 K均值算法使用的聚类准则函数是误差平方和准则,通过反复迭代优化聚类结果,使所有样本到各自所属类别的中心的距离平方 ...

  10. pandas | 如何在DataFrame中通过索引高效获取数据？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是pandas数据处理专题的第四篇文章,我们一起来聊聊DataFrame中的索引. 上一篇文章当中我们介绍了DataFrame数据结构当 ...