Js 之pdf文件转图片上传

Posted 2020-12-21 样子2018

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js 之pdf文件转图片上传相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pdf转图片与上传</title>
</head>
<body>
<input id=‘pdf‘ type=‘file‘ accept="application/pdf">
<div id="imgDiv"></div>
</body>
<script src="jquery.js"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script>
    $("#pdf").change(function () {
        var pdfFileURL = $(‘#pdf‘).val();
        if (pdfFileURL) {
            $("#imgDiv").empty();//清空上一PDF文件展示图
            var files = $(‘#pdf‘).prop(‘files‘); //获取到文件
            /*pdf.js无法直接打开本地文件,所以利用FileReader转换*/
            var reader = new FileReader();
            reader.readAsArrayBuffer(files[0]);
            reader.onload = function (e) {
                var typedarray = new Uint8Array(this.result);
                PDFJS.getDocument(typedarray).then(function (pdf) { //PDF转换为canvas
                    $("#imgDiv").css("border", "0"); //清除文本、边框
                    if (pdf) {
                        var pageNum = pdf.numPages;
                        for (var i = 1; i <= pageNum; i++) {
                            var canvas = document.createElement(‘canvas‘);
                            canvas.id = "pageNum" + i;
                            $("#imgDiv").append(canvas);
                            var context = canvas.getContext(‘2d‘);
                            openPage(pdf, i, context);
                        }
                    }
                });
            };
        }
    });
    function openPage(pdfFile, pageNumber, context) {
        var scale = 2;
        pdfFile.getPage(pageNumber).then(function(page) {
            viewport = page.getViewport(scale); // reference canvas via context
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.then(function () {
                canvas.toBlob(function (blob) {
                    let formdata = new FormData();
                    formdata.append(‘file‘, blob);
                    //文件上传
                    $.ajax({
                        url: "url",
                        type: ‘post‘,
                        data: formdata,
                        dataType: ‘json‘,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success(res) {
                            console.log(res)
                        }
                    })
                })
            })
        });
        return;
    };
</script>
</html>

以上是关于Js 之pdf文件转图片上传的主要内容，如果未能解决你的问题，请参考以下文章

mui开发app之js将base64转图片文件

pdf流文件转图片

可以免费PDF转图片的软件？

node批量读取本地图片并上传

怎么用全能扫描王把图片转换成PDF(小于1M)？

js之上传文件多图片预览