h5最简单预览pdf在线-新

pdf预览，有的可能疑惑电脑直接打开就行。
其实i试下os上和pc展示没问题的，但安卓h5等基本是不行的。
手机端时会碰到直接打开pdf文件，而不是下载的需求.
同打开word文件一样·mammoth.browser.min.js一样用特殊插件pdfh5.js。
(docx为可解压格式，故doc则不支持）

image.png

1 cnpm install pdfh5.js

cnpm install pdfh5.js

cnpm同等yarn、安装node_modules包，其中自带示范

2 调整一下pdf.html

axios用不上的，可以注释掉。
js文件其实，自行识别了路径file，pdf.html?file=a.pdf。
默认优先获取浏览器地址栏？file=后面的地址，如果地址栏没有，再拿配置项的pdfurl或者data来渲染pdf。pdfh5实例初始化

image.png

3 下载pdf

xx.png

文档中https://www.gjtool.cn/pages/index/detail?id=640ec464e766bb2975382584，
有提及download方法，但没生效换用其余方式了。
自行添加一个icon，点击时a链接方式下载。
小程序webview不支持直接下载，需要跳转小程序中使用单独方法。
只针对访问的h5页面，客户端同小程序。

// 样式 
 #down {
            overflow: hidden;
            position: fixed;
            right:15px;
            top:15px;
            z-index:999;
            width:45px;
            background: rgb(74 73 73 / 40%);
            border-radius: 50%;
   //   }

 $('.pageNum').append(`<img id="down" src="./xx/xx.png">`)

            $('#down').click(function(){
                fetch('下载地址').then(res => {
                //  *  响应一个promise 对象
                // 此处响应体的是一个 【ReadableStream】
                         // 将响应体转换为二进制流
                        res.blob().then(data=>{
                        // 生成一个domstring (临时地址)，必须生成临时地址才能够被下载
                            saveImg(URL.createObjectURL(data), '下载标题')
                        })
                    })
            })

            function saveImg(url, filename) {
                var oA = document.createElement("a");
                oA.download = ''; // 设置下载的文件名，默认是'下载'
                oA.href = url;
                oA.download = filename; // 设置文件名
                document.body.appendChild(oA);
                oA.click();
                oA.remove(); // 下载之后把创建的元素删除
            }