PDF轉圖片，在線PDF轉JPG/PNG

[在線DEMO]（https://oktools.net/pdf2img）

原理

使用pdf.js預覽圖片，pdf.js將pdf通過canvas將每一頁渲染出來，然后我們通過canvas的toDataURL方法保存為jpg或png格式。
pdf.js是Mozilla開源的一個js庫，無需任何本地支持就可以在瀏覽器上顯示pdf文檔。唯一的要求就是瀏覽器必須支持HTML5。

依賴

需要pdf.min.js和pdf.worker.min.js兩個js文件

全部代碼實現

 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js';

    const preview = document.getElementById('preview');
    const page_num = document.getElementById('page_num');
    const out_type = document.getElementById('out_type');

    let pdfFile, pdf, pageNum, context = preview.getContext('2d');

    out_type.querySelectorAll('.button').forEach(function (btn) {
        btn.onclick = function () {
            out_type.querySelector('.primary').classList.remove('primary');
            btn.classList.add('primary');
        }
    });

	// 加載PDF文件
    function loadPDF(file) {
        pdfFile = file;
        file_name.innerHTML = file.name;

        let reader = new FileReader();
        reader.onload = (e) => showPDF(e.target.result);
        reader.readAsDataURL(file);
    }

	// 預覽PDF
    function showPDF(url) {
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function (doc) {
            pdf = doc;
            pageNum = 1;
            preview.hidden = false;
            readerPage()
        }, function (reason) {
            alert(reason)
        });
    }

	// 預覽上一頁
    function prevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        readerPage()
    }

	//預覽下一頁
    function nextPage() {
        if (pageNum >= pdf.numPages) {
            return;
        }
        pageNum++;
        readerPage()
    }
	
	//渲染頁面
    function readerPage(callback) {
        pdf.getPage(pageNum).then(function (page) {
            let scale = 1.5;
            let viewport = page.getViewport({scale: scale});

            preview.height = viewport.height;
            preview.width = viewport.width;

            let renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext).promise.then(callback);
        });
        page_num.innerText = `頁碼 : ${pageNum} / ${pdf.numPages}`;
    }

	// 保存當前頁
    function save() {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        let type = out_type.querySelector('.primary').innerText.toLowerCase();
        a.download = pdfFile.name + '-' + pageNum + '.' + type;
        a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');
        a.dispatchEvent(event)
    }

	//保存全部頁面
    function saveAll() {
        pageNum = 1;
        savePage()
    }

    function savePage() {
        if (pageNum > pdf.numPages) {
            alert('全部保存成功');
            return
        }

        readerPage(function () {
            save();
            pageNum++;
            savePage();
        });
    }

預覽: