pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析
官网地址:
- 下载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/82388497PDF.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[1024];int len = 0; while ((len = bufferedInputStream.read(buffer)) > 0) { outputStream.write(buffer, 0, len);}// 人走带门bufferedInputStream.close();outputStream.flush();outputStream.close();
案例二:
案例三:
直接使用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 = 0; fs.Read(buffer, 0, (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里。