前端 JavaScript js PDF转img PDF转base64 PDF转图片

最新推荐文章于 2024-07-03 14:05:21 发布

qq_39529154

最新推荐文章于 2024-07-03 14:05:21 发布

阅读量5.7k

点赞数 4

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_39529154/article/details/107583872

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求是将前端加载的PDF转化到base64上传服务器

<html>
<head>
</head>
<body>
</body>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
<script type="text/javascript">

    pdfjsLib.getDocument("./2a.pdf").then((pdf) => {
        const numPages = pdf.numPages;
        const allPromise = [];
        for (let i = 1; i <= numPages; i++) {
            allPromise.push(pdf.getPage(i))
        }
        return Promise.all(allPromise)
    }).then((allPDF) => {
        return renderPDFS(allPDF)
    }).then(allRender => {
        console.log(allRender)
        const allCanvasOKPromises = allRender.map(render => render.renderPromise);
        const allCanvas = allRender.map(render => render.canvas);
        return Promise.all(allCanvasOKPromises).then(val => {
            return allCanvas.map(canvas => {
                return canvas.toDataURL();
            })
        })
    }).then(allBase64 => {
        allBase64.forEach(base64 => {
            const image = new Image();
            image.src = base64;
            document.body.appendChild(image);
        })
    })

    function renderPDFS(allPDF) {
        return allPDF.map(eachPDF => {
            return renderPDF2Canvas(eachPDF)
        })
    }

    function renderPDF2Canvas(eachPDF) {
        const viewport = eachPDF.getViewport(2);
        const canvas = document.createElement("canvas");
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const renderPromise = eachPDF.render({canvasContext: context, viewport: viewport})
        return {canvas, renderPromise}
    }
</script>

</html>

太久了已经忘记怎么写，下面是vue的参考代码

function renderPDF2Canvas(eachPDF) {
    const viewport = eachPDF.getViewport(2);
    const canvas = document.createElement("canvas");
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    const renderPromise = eachPDF.render({canvasContext: context, viewport: viewport})
    return {canvas, renderPromise}
}

function renderPDFS(allPDF) {
    return allPDF.map(eachPDF => {
        return renderPDF2Canvas(eachPDF)
    })
}


export function pdf2img(pdfFile) {
    // eslint-disable-next-line
    return pdfjsLib.getDocument(pdfFile).then((pdf) => {
        const numPages = pdf.numPages;
        const allPromise = [];
        for (let i = 1; i <= numPages; i++) {
            allPromise.push(pdf.getPage(i))
        }
        return Promise.all(allPromise)
    }).then((allPDF) => {
        return renderPDFS(allPDF)
    }).then(allRender => {
        console.log(allRender)
        const allCanvasOKPromises = allRender.map(render => render.renderPromise);
        const allCanvas = allRender.map(render => render.canvas);
        return Promise.all(allCanvasOKPromises).then(() => {
            return allCanvas.map(canvas => {
                return canvas.toDataURL();
            })
        })
    }).then(allBase64 => {
        // console.log(allBase64)
        return allBase64
    })
}

本地调用：
    handleFiles1: function (filePDF, fileList) {
      console.log(filePDF)
      this.companyName = filePDF.name.split(".")[0];
      const reader = new FileReader();
      reader.readAsArrayBuffer(filePDF.raw);
      reader.onload = (e) => {
        const myData = new Uint8Array(e.target.result)
        const docInitParams = {data: myData};
        pdf2img(docInitParams).then(allImages => {
          this.sourceImages = allImages
          this.showUpload1 = false;
          this.$nextTick(() => {
            this.judgeLoadTwoPDF();
          })
        })
      }
    },

       <el-upload
             accept="application/pdf"
             class="upload-demo"
             drag
             action=""
             :auto-upload="false"
             :show-file-list="false"
             :on-change="handleFiles1"
         >
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">将原文件拖到此处，或<em>点击加载</em></div>
           <div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
         </el-upload>

qq_39529154

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
13
评论
前端 JavaScript js PDF转img PDF转base64 PDF转图片

需求是将前端加载的PDF转化到base64上传服务器<html><head></head><body></body><!--<script src="https://cdn.bootcdn.net/ajax/l
复制链接

扫一扫

专栏目录