原理

使用pdf.js預(yù)覽圖片，pdf.js將pdf通過canvas將每一頁渲染出來，然后我們通過canvas的toDataURL方法保存為jpg或png格式。

pdf.js是Mozilla開源的一個(gè)js庫，無需任何本地支持就可以在瀏覽器上顯示pdf文檔。唯一的要求就是瀏覽器必須支持HTML5。

依賴

需要pdf.min.js和pdf.worker.min.js兩個(gè)js文件

全部代碼實(shí)現(xiàn)

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);

}

// 預(yù)覽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)

});

}

// 預(yù)覽上一頁

function prevPage() {

if (pageNum <= 1) {

return;

}

pageNum--;

readerPage()

}

//預(yù)覽下一頁

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}`;

}

// 保存當(dāng)前頁

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();

});

}

預(yù)覽:

總結(jié)

以上是生活随笔為你收集整理的pdfjs转图片_PDF转图片，在线PDF转JPG/PNG的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。