使用pdf.js把PDF文件转图片

项目需求把客户上传的pdf文件转换成图片并执行下载,网上资料查了一下,觉得pdf.js
实现比较方便。

1.了解pdf.js

   PDF.js是基于开放的 HTML5 及 JavaScript 技术实现的开源产品,可以实现在html下直接浏览pdf文档。

2.进行核心文件的引入

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析
<script src="pdf.js" type="text/javascript">script>

测试代码:

<html>
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        .lightbox{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display: block;
            background-color: rgb(0, 0, 0);
        }
        .pop{
            position: absolute;
            left: 50%;
            width: 894px;
            margin-left: -447px;
            z-index: 9;
        }
    style>
    <script src="pdf.js" type="text/javascript">script>

    <script type="text/javascript">
        function showPdf() {
            var container = document.getElementById("container");
            container.style.display = "block";
            var url = 'p1.pdf';
            PDFJS.workerSrc = 'pdf.worker.js';
            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
                pdf.getPage(1).then(function getPageHelloWorld(page) {
                    var scale = 1;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }
    script>
head>
<body>
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档a>h1>
<div id="container" style="display: none;">
    <div class="lightbox">div>
    <div id="pop" class="pop">
        <canvas id="the-canvas">canvas>
    div>
div>
body>
html>

下载地址:http://mozilla.github.io/pdf.js/

你可能感兴趣的:(js)