Webview展示渲染PDF

开发要求使用webview展示PDF，最开始使用 pdf.js 这个插件

但是这个插件在高版本Chrome和火狐浏览器可是正常展示，其他浏览器上白屏

后面找到h5pdf 这个插件才成功，测试在比较比较低的浏览器或者Webview 都能正常显示

实例代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title></title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/pdfh5.css"/>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        #demo {
            display: none;
            /* height: 33%; */
        }
    </style>
</head>

<body>
<div id="app">
    <div class="text-wrapper">
        <div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
    </div>

</div>
<div id="demo"></div>
<script src="js/pdf.js"></script>
<script src="js/pdf.worker.js"></script>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var pdfh5;
    $(function () {
        $("#app").remove()
        $("#demo").show()
        pdfh5 = new Pdfh5('#demo', {
            pdfurl: "git.pdf",
            URIenable: true,
            goto: 0,
            zoomEnable: false,
        });
    })
</script>
</body>

</html>

实例代码仓库 https://github.com/Guiyunweb/h5-pdf

实例展示地址 https://guiyunweb.github.io/h5-pdf/

h5pdf插件地址 https://github.com/gjTool/pdfh5

#js#Android#HTML#Webview
Webview展示渲染PDF
https://guiyunweb.com/archives/webview%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA%E6%B8%B2%E6%9F%93pdf
作者
归云
发布于
2022年06月13日
更新于
2024年06月18日
许可协议