| js怎么操作mysql js怎么操作pdf | 您所在的位置：网站首页 › 怎么更改qq文件下载路径 › js怎么操作mysql js怎么操作pdf |
js怎么操作mysql js怎么操作pdf
|
PDF.js使用总结 PDF.js是为html5实现的在线预览pdf框架，所以使用的前提是浏览器要支持html5。该插件不需要任何本地支持，对浏览器的兼容性也比较好（低版本的IE浏览器请绕行）。 本文记录了pdf.js插件使用方式和框架构建过程中遇到的一些问题，主要实现了以文件路径和文件流的方式预览的功能，通过修改源码对预览页面下载、打印按钮可操作性进行了控制，同时在预览界面添加了关闭按钮。 1. 下载PDF插件源码 下载地址：GitHub: https://github.com/mozilla/pdf.js/ build\generic\web目录中文件是构建所需的 启动运行http://localhost:8080/generic/web/viewer.html 可以看到如下界面：
2. 与实际项目配合使用时的框架构建过程 我用的是.NET结构，在plugins目录下新建了pdf目录，将所需的文件考到pdf目录中。 结构如下：
注意修改引用文件的路径： viewer.html文件中： //中英文转换相关3. 已知或者能够获取到文件路径，采用以下方式调用该插件进行预览： //在js中调用下面代码，filePath为文件路径 window.location.href = "../../../plugins/pdf/viewer.html?file=" + filePath;4. 如果获取到的是流文件，采用以下方式预览 //在js中调用下面代码，filePath为文件路径 window.location.href = "../../../plugins/pdf/viewer.html?file=" + encodeURIComponent(global.serverIP + "/api/files/FileView?filePath=" + filePath) ;global.serverIP + "/api/files/FileView?filePath=" + filePath：指的是根据文件路径去服务端获取流文件。 这里说明一下为什么有文件路径还需去获取流文件，因为有时候需要对文件进行加密存储，加密后根据路径下载到的文件是乱码的，所以需要去服务端获取解密后的流文件。 由于一个url中不能出现两个？号，所以需要用到js中的encodeURIComponent()来进行编码，然后viewer.js里会自动对编码的内容进行解码，函数如下：
服务端返回流文件的方式如下： /// /// 文件预览 /// /// 文件路径 /// [HttpGet] public HttpResponseMessage FileView([FromUri] string filePath) { //定义响应信息 HttpResponseMessage response = new HttpResponseMessage(); Stream stream = null; try { var path = System.Web.HttpContext.Current.Server.MapPath(filePath); bool result = FileOperate.FileDownload(path, out stream); if (result) { // 获取对应文件后缀名 string fileExt = filePath.Substring(filePath.LastIndexOf('.') + 1); //根据文件类型，设置http相应中Content-Type内容标头值 string contentType = "application/" + fileExt; //获取文件原名 string fileName = "666.pdf"; response = new HttpResponseMessage(HttpStatusCode.OK); //流文件内容 response.Content = new StreamContent(stream); //流文件类型 response.Content.Headers.ContentType = new MediaTypeHeaderValue(contentType); //指定文件名 response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline") { FileName = fileName }; return response; } else { //表明未获取到数据 return new HttpResponseMessage(HttpStatusCode.NoContent); } } catch (Exception ex) { log.Error("FileView()", ex); //表明未获取到数据 response = new HttpResponseMessage(HttpStatusCode.NoContent); return response; } }5.页面中按钮显示英文不显示中文解决方案 我遇到英文没有被翻译为中文的原因是： 下载的源码中翻译相关的文件后缀为.properties，在.net环境中好像识别不了，直接将后缀改为.txt 就可以正常显示中文了。修改后如下：
6. 修改源代码，对打印、下载按钮进行控制 因为在实际中有的文件只能预览，不能进行打印、下载操作，所以需要对这两个按钮可操作性进行控制。 在viewer.html页面大概第155~160行找到打印、下载相关控件信息如下，获取到控件id：
在viewer.js页面5463行添加下图红框中的代码
这里是在调用时添加了控制打印下载的标志参数downloadFlag： 值为true时允许下载打印；false时不允许， 在js中调用时添加downloadFlag参数， 调用方式如下： //获取流文件的方式预览加密文件 window.location.href = "../../../plugins/pdf/viewer.html?file=" + encodeURIComponent(global.serverIP + "/api/files/FileView?filePath=" + filePath) + "&downloadFlag=" + downloadFlag; //获取文件地址的方式预览普通文件 window.location.href = "../../../plugins/pdf/viewer.html?file=" + filePath+ "&downloadFlag=" + downloadFlag;downloadFlag设为false时，按钮变为灰色不可用，效果如下：
7. 修改源代码，在预览页面添加关闭按钮 在viewer.html页面新增关闭按钮，代码如下： 关闭在viewer.js页面添加关闭按钮事件： //关闭预览按钮事件 function CloseThisPage() { window.history.back(-1); }效果图如下：
|
【本文地址】