js实现浏览器中将pdf文件转换成一张长图片代码-html代码-BFW代码库

js实现浏览器中将pdf文件转换成一张长图片代码

代码语言：html

所属分类：其他

代码描述：js实现浏览器中将pdf文件转换成一张长图片代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:40px;">
    <input type="file" id="pdfInput" accept=".pdf">
    <button id="convertButton">将PDF转为长图片</button>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pdf.2.2.js"></script>

    <script>
    var allimg=[];
        document.getElementById("convertButton").addEventListener("click", function () {
            var pdfInput = document.getElementById("pdfInput");
            var file = pdfInput.files[0];

            if (file && file.type === "application/pdf") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var pdfData = e.target.result;
                    convertPdfToImages(pdfData);
                };
                reader.readAsArrayBuffer(file);
            } else {
                alert("请选择一个有效的PDF文件。");
            }
        });

        async function convertPdfToImages(pdfData) {
            const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
            const numPages = pdf.numPages;
            let imgheight=0;
             
              const longcanvas = document.createElement("canvas");
                const longcontext = longcanvas.getContext("2d");
                longcanvas.width = 0; // 设置宽度为 800 像素
                longcanvas.height = 0; // 设置高度为 600 像素
//longcanvas.height = 17680;

            for (let pageNum = 1; pageNum <= numPages; pageNum++) {
                const page = await pdf.getPage(pageNum);
                const viewport = page.getViewport({ scale: 2.0 });
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
              //  longcanvas.width = viewport.width;
            .........完整代码请登录后点击上方下载按钮下载查看