html页面读取pdf案例

最新推荐文章于 2024-04-22 16:41:18 发布

土垚金鑫

最新推荐文章于 2024-04-22 16:41:18 发布

阅读量1.3k

点赞数

分类专栏： JavaScript pdf

本文链接：https://blog.csdn.net/weixin_44994731/article/details/118416257

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

pdf

2 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

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

下载的项目目录如下：

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

web文件包含的如下：
在这里插入图片描述

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

<iframe frameborder="0" id="myIframe" scrolling="no" src="../web/viewer.html" width="100%" height="800px"></iframe>

<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)
    })
</script>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--<input type="file" id="files" style="display: none" onchange="fileImport();">-->
    <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>

本案例的项目源代码地址如下
案例代码下载

土垚金鑫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html页面读取pdf案例

html页面读取pdf案列，如下图所示下载pdf.js相关链接如下：pdf.js地址下载下载的项目目录如下：用到的最重要的两个文件夹是build与web两个文件web文件包含的如下：在使用的时候，可以通过iframe标签将viewer.html嵌入到页面,在传入src值的时候，需要添加参数file="pdf的链接路径"<iframe frameborder="0" id="myIframe" scrolling="no" src="../web/viewer.html" width
复制链接

扫一扫

专栏目录