使用pdf.js实现在线预览pdf文件转成图片格式下载效果代码-html代码-BFW代码库

使用pdf.js实现在线预览pdf文件转成图片格式下载效果代码

代码语言：html

所属分类：其他

代码描述：使用pdf.js实现在线预览pdf文件转成图片格式下载效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background: white;
        }

    </style>
</head>
<body>

    <div>
        <main>
            <div class="container">
                <h1>PDF转图片</h1>
                <div >
                    <span>
                        <input id="input_file" class="file-input" type="file" accept="application/pdf"
                        onchange="loadPDF(this.files[0])">
                      
                        <span class="file-button">选择一个PDF文件</span>
                    </span>
                    <span id="file_name" class="file-name"></span>
                </div>
                <div>

                    <button class="button" onclick="prevPage()">
                        <i class="fa fa-arrow-left"></i>
                        <span>上一页</span>
                    </button>
                    <button class="button" onclick="nextPage()">
                        <span>下一页</span>
                        <i class="fa fa-arrow-right"></i>
                    </button>

                    <button class="button ">
                        <span>JPG</span>
                    </button>
                    <button class="button">
                        <span>PNG</span>
                    </button>

                    <button class="button " onclick="save()">
                        <span>保存本页</span>
                    </button>
                    <button class="button " onclick="saveAll()">
                        <span>全部保存</span>
                    </button>
                </div>
                <p id="page_num"></p>
                <div>
                    <canvas id="preview" class="bordered" hidden></canvas>
                </div>
            </div>
        </main>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pdf.2.2.js"></script>
    <script>

        const preview = document.getElementById('preview');
        const page_num = document.getElementById('page_num');
        const out_type = document.getEl.........完整代码请登录后点击上方下载按钮下载查看