使用pdf.js实现前端页面预览pdf文档，解决了跨域请求
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文档，解决了跨域请求的更多相关文章
- 使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
- pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- Java实现web在线预览office文档与pdf文档实例
https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...
- IOS 预览word文档的集中方式
在iPhone中可以很方便的预览文档文件,如:pdf.word等等,这篇文章将以PDF为例.介绍三种预览PDF的方式,又分别从本地pdf文档和网络上的pdf文档进行对比. 预览本地PDF文档: 1.使 ...
- Asp.Net在线预览Word文档的解决方案与思路
前几天有个老项目找到我,有多老呢?比我工作年限都长,见到这个项目我还得叫一声前辈. 这个项目目前使用非常稳定,十多年了没怎么更新过,现在客户想加一个小功能:在线预览Word文档. 首先想到的是用第三方 ...
- html页面预览pdf文件使用插件pdfh5.js
html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...
- 在Outlook中查看预览SharePoint文档库的文档
本文概况 阅读时间: 约2分钟 适用版本:SharePoint Server 2010及以上 面向用户:普通用户,管理员 难度指数:★★☆☆☆ 在日常工作中,总有一些常用的文档需要经常打开查看,其实我 ...
- 通过程序预览Office文档
我承认,标题是夸大了,就是为了吸引注意力.这里只有Word文档和Excel文档的预览代码. Word://此部分来源:http://princed.mblogger.cn/posts/11885.as ...
- 点击<a>页面跳转解决办法/跨域请求，JSONP
有些时候做的东西刚好要用到链接,但又不需要去链接,只需要对onclick事件进行处理,但它却这样子写 <a href="#" onclick="gettext()& ...
随机推荐
- html实现邮箱发送邮件_js发送邮件至指定邮箱功能
在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?下面列举能够在通过前端实现邮件发送的几种方式: 方式一: ...
- 推荐一款ui架构--frozenui
首页是这样定义的 移动框架 重磅出击 简单易用,轻量快捷,为移动端服务的前端框架 链接地址 http://frozenui.github.io/base.html#layout
- 【华为云技术分享】跟唐老师学习云网络 ： Kubernetes网络实现
当今K8s独霸天下之时,咱们站在更高的角度,好好的看看K8s网络是以什么理念构筑的.以及一个容器集群的好保姆,是如何分别照顾 南北流量和东西流量的. 一.简单介绍下Kubernetes 略..容器集群 ...
- mysql全外和交叉&&sql92pksql99
#全外 use girls; SELECT b.*,a.* FROM beauty b FULL OUTER JOIN boys a on b.boyfrien_id=a.id; #交叉连接99标准笛 ...
- YAML 语言教程与使用案例
YAML语言教程与使用案例,如何编与读懂写YAML文件. YAML概要 YAML 是 “YAML Ain’t a Markup Language”(YAML 不是一种标记语言)的递归缩写.在开发的这种 ...
- Dubbo测试环境服务调用隔离这么玩对么
背景阐述 前几天,有位同学问我一个关于 Dubbo 的问题.他的诉求是这样子的: 诉求一 第一个诉求是本地开发的时候想自己调用自己的服务,比如自己在改 A 服务,然后出问题了,本地再启动一个 B 服务 ...
- vs code的使用(一) Format On Paste/Format On Save/ Format On Type
很多经典的问题可以搜索出来,但是一些很小的问题网上却没有答案 (这是最令人发狂的,这么简单,网上居然连个相关的信息都没有给出) (就比如我想保存后自动格式化,但网上的大部分都是如何取消保存后自动格式化 ...
- [spring] -- 事务篇
关于Transactional注解 五个表示隔离级别的常量 TransactionDefinition.ISOLATION_DEFAULT:使用后端数据库默认的隔离级别,Mysql 默认采用的 REP ...
- django-rest-framework-源码解析002-序列化/请求模块/响应模块/异常处理模块/渲染模块/十大接口
简介 当我们使用django-rest-framework框架时, 项目必定是前后端分离的, 那么前后端进行数据交互时, 常见的数据类型就是xml和json(现在主流的是json), 这里就需要我们d ...
- el-table 操作列(编辑or删除) 获取本行相关数据
简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的id或者其他附属信息.ok,下边放代码 //vue el-table的部分代码 <el ...