JS直接下载PDF文件

if (ext == "pdf") {
        var fileUrl= 'http://code.com/upload/8789c3396a26.pdf';
        var name = ‘工资调整方案.pdf’;

        var xhr = new XMLHttpRequest();
        xhr.open('get', fileUrl, true);
        xhr.responseType = 'blob';
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (typeof window.chrome !== 'undefined') {
                    // Chrome version 
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(xhr.response);
                    link.download = name;
                    link.click();
                } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    // IE version 
                    var blob = new Blob([xhr.response], { type: 'application/pdf' });
                    window.navigator.msSaveBlob(blob, name);
                } else {
                    // Firefox version 
                    var file = new File([req.response], name, { type: 'application/force-download' });
                    window.open(URL.createObjectURL(file));
                }
            }
        };
        xhr.send();
    }

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
H5(HTML5)是一种用于构建网页和应用程序的技术标准,而JSJavaScript)是一种脚本语言,用于为网页添加交互效果和功能。在H5和JS的结合下,我们可以实现在网页上直接查看PDF文件的功能。 要实现在H5 JS页面中查看PDF文件,我们通常使用一些开源的PDF库,如pdf.jspdf.js是一个由Mozilla开发的库,可以在浏览器中直接加载和渲染PDF文档。 具体步骤如下: 1. 引入pdf.js库:在HTML页面的`<head>`标签中,添加引入pdf.js库的代码。可以通过在CDN上获取最新版本的库文件,例如: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script> ``` 2. 创建容器元素:在HTML页面中,创建一个用于显示PDF内容的容器元素,例如一个`<div>`元素,同时为其指定一个id,例如`pdfContainer`: ```html <div id="pdfContainer"></div> ``` 3. 编写JavaScript代码:在HTML页面的`<script>`标签中,编写JavaScript代码来加载和渲染PDF文档: ```javascript // 创建PDF渲染器 const pdfContainer = document.getElementById('pdfContainer'); const pdfRenderer = pdfjsLib.getDocument('path/to/pdf/file.pdf'); // 渲染PDF页面 pdfRenderer.promise.then(function(pdf) { for (let i = 1; i <= pdf.numPages; i++) { pdf.getPage(i).then(function(page) { const canvas = document.createElement("canvas"); const canvasContext = canvas.getContext('2d'); const viewport = page.getViewport({scale: 1.5}); // 设置缩放比例 canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext, viewport }); pdfContainer.appendChild(canvas); }); } }); ``` 以上代码会将PDF的每一页渲染成一个画布元素,并将其添加到`pdfContainer`容器中显示。 通过上述步骤,我们就可以在H5 JS页面中直接查看PDF文件了。虽然这只是一个简单的演示示例,但通过使用pdf.js库,我们可以实现更多高级的PDF处理功能,如搜索、缩放和导航等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值