pdfjs意外的服务器响应,PDF.JS 异常处理

PDF.js 具体用法前面有写过,今天记录一下异常处理,我的 viewer.html 后面跟着的地址是服务器返回的地址然后用一个 iframe 标签加载,有时可能服务器发生异常,也可能打开瞬间被异地删除,再或者没有网络....

异常处理是在 pdf.js 的源码中增加代码,大约6287行,onStateChange 方法中监听:

onStateChange: function NetworkManger_onStateChange(xhrId, evt){

...

...

...

delete this.pendingRequests[xhrId];

/*我是与后台协商,异常返回450,其它返回的状态码还没有增加处理*/

if(xhr.status === 0 && this.isHttp) {

var eventClick = documet.createEvent('HTMLEvents');

eventClick.initEvent('notNet',false,false);

window.dispatchEvent(eventClick);

return;

}else if(chr.status === 450){

var eventClick = documet.createEvent('HTMLEvents');

eventClick.initEvent('fileErr',false,false);

window.dispatchEvent(eventClick);

}

...

...

...

}

调用 iframe 标签的文件增加监听:

iframe.addEventListener('notNet',function(){

console.log("网络异常")

});

iframe.addEventListener('fileErr',function(){

console.log("服务器异常")

})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现步骤如下: 1. 在前端页面中引入pdf.jspdf.worker.js,可以通过以下方式引入: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js"></script> ``` 2. 定义一个展示PDF的div,例如: ```html <div id="pdf-container"></div> ``` 3. 编写前端代码,通过ajax请求后端接口获取PDF文件并展示: ```javascript //获取PDF文件并展示 function showPdf() { //ajax请求获取PDF文件 $.ajax({ url: '/getPdf', //后端接口地址 type: 'GET', dataType: 'json', success: function(response) { //将PDF文件转成blob对象 const pdfBlob = new Blob([response], {type: 'application/pdf'}); //创建一个URL对象 const pdfUrl = URL.createObjectURL(pdfBlob); //加载PDF文件并展示 PDFJS.getDocument(pdfUrl).then(function(pdf) { pdf.getPage(1).then(function(page) { const canvas = document.getElementById('pdf-container'); const ctx = canvas.getContext('2d'); const viewport = page.getViewport({scale: 1}); canvas.width = viewport.width; canvas.height = viewport.height; page.render({canvasContext: ctx, viewport: viewport}); }); }); }, error: function(err) { console.error(err); } }); } ``` 在上述代码中,我们通过ajax请求后端接口获取到PDF文件的二进制流,然后将其转成Blob对象。接着,我们创建一个URL对象将Blob对象的URL作为参数传入。最后,通过pdf.js提供的API加载并展示PDF文件。 4. 在后端接口中获取PDF文件,并将其保存在SFTP上: ```java @GetMapping("/getPdf") @ResponseBody public ResponseEntity<byte[]> getPdf() { byte[] pdfBytes = null; try { //连接SFTP服务器 ChannelSftp sftp = SftpUtil.connectSftp(SFTP_HOST, SFTP_PORT, SFTP_USERNAME, SFTP_PASSWORD); //下载PDF文件 InputStream pdfStream = SftpUtil.downloadFile(sftp, SFTP_PATH, PDF_FILENAME); pdfBytes = IOUtils.toByteArray(pdfStream); //关闭SFTP连接 SftpUtil.disconnectSftp(sftp); } catch (Exception e) { e.printStackTrace(); } HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("attachment", PDF_FILENAME); return new ResponseEntity<byte[]>(pdfBytes, headers, HttpStatus.OK); } ``` 在上述代码中,我们通过SftpUtil工具类连接SFTP服务器并下载PDF文件流,将其转成字节数组并返回给前端。同时,我们设置返回header的Content-Type为application/pdf,Content-Disposition为attachment,指定响应体的类型为PDF文件并指定下载文件名。 以上就是使用pdf.js实现保存在SFTP上的PDF文件在线预览的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值