第一步：下載pdf.js
下載地址：https://www.jsdelivr.com/package/npm/pdfjs-dist
打開后找到pdf.js、pdf.work.js以及cmaps路徑下的全部檔案，下載到本地或者直接參考其地址
實體代碼
//HTML <canvas id="the-canvas"></canvas>
//JS參考 <script type="text/javascript" src="https://www.cnblogs.com/script/pdf.js"></script>
//JS使用pdf.JS代碼
var url = 'test.pdf';
PDFJS.cMapUrl = 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/';//字體決議
PDFJS.cMapPacked = true;
//加載核心檔案
PDFJS.workerSrc = 'https://www.cnblogs.com/script/pdf.worker.js';//或者https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.js
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
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
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
console.error(reason);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/123506.html
標籤：JavaScript
上一篇：React 條件渲染簡單演示