html页面读取pdf案例

约定不等于承诺〃 2022-10-12 01:23 295阅读 0赞

html页面读取pdf案列，如下图所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

下载pdf.js相关链接如下：  
[pdf.js地址下载][pdf.js]

下载的项目目录如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
用到的最重要的两个文件夹是build与web两个文件

web文件包含的如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]

在使用的时候，可以通过iframe标签将viewer.html嵌入到页面,在传入src值的时候，需要添加参数**file="pdf的链接路径"**

完整代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div>
        
        <input type="button" id="fileImport" value="浏览pdf文件">
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        $("#fileImport").click(function() {
           // $("#files").click();
            setTimeout( ()=>{
                var ifSrc = $("#myIframe").attr("src")
                var httpStr = "?file=https://wmxy-talents.oss-cn-hangzhou.aliyuncs.com/speechppt/e926d5da-0aa6-4c3b-8533-fc6ccef057be.pdf"
                $("#myIframe").attr("src",ifSrc+httpStr)
            },100)
        })
    
    /*
        function fileImport() {
            //获取读取我文件的File对象
            var selectedFile = document.getElementById('files').files[0];
            var name = selectedFile.name; //读取选中文件的文件名
            var size = selectedFile.size; //读取选中文件的大小
            console.log("文件名:" + name + "大小:" + size);
            var reader = new FileReader(); //这是核心,读取操作就是由它完成.
            reader.readAsText(selectedFile); //读取文件的内容,也可以读取文件的URL
            reader.onload = function() {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                //console.log(this.result);
            }
        }
    */
    
    
    
    </script>
    <iframe frameborder="0" id="myIframe" scrolling="no" src="../web/viewer.html" width="100%" height="800px"></iframe>
    </body>
    </html>

本案例的项目源代码地址如下  
[案例代码下载][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221005/0de29c24318f467783685dfcef7de8ca.png
[pdf.js]: https://github.com/mozilla/pdf.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/9bf5042e7ce34c84ae48c19a5f8cf1e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/5957167e24bf490c8a20073b59fa7a5a.png
[Link 1]: https://download.csdn.net/download/weixin_44994731/19991230