<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title></head><body> ???<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> ???<h1>PDF.js ‘Hello, world!‘ example</h1> ???<canvas id="the-canvas"></canvas></body><script> ???var url = ‘//cdn.mozilla.net/pdfjs/helloworld.pdf‘; ???// Loaded via <script> tag, create shortcut to access PDF.js exports. ???var pdfjsLib = window[‘pdfjs-dist/build/pdf‘]; ???// The workerSrc property shall be specified. ???pdfjsLib.GlobalWorkerOptions.workerSrc = ‘//mozilla.github.io/pdf.js/build/pdf.worker.js‘; ???// Asynchronous download of PDF ???var loadingTask = pdfjsLib.getDocument(url); ???loadingTask.promise.then(function (pdf) { ???????console.log(‘PDF loaded‘); ???????// Fetch the first page ???????var pageNumber = 1; ???????pdf.getPage(pageNumber).then(function (page) { ???????????console.log(‘Page loaded‘); ???????????var scale = 1.5; ???????????var viewport = page.getViewport(scale); ???????????// Prepare canvas using PDF page dimensions ???????????var canvas = document.getElementById(‘the-canvas‘); ???????????var context = canvas.getContext(‘2d‘); ???????????canvas.height = viewport.height; ???????????canvas.width = viewport.width; ???????????// Render PDF page into canvas context ???????????var renderContext = { ???????????????canvasContext: context, ???????????????viewport: viewport ???????????}; ???????????var renderTask = page.render(renderContext); ???????????renderTask.then(function () { ???????????????console.log(‘Page rendered‘); ???????????}); ???????}); ???}, function (reason) { ???????// PDF loading error ???????console.error(reason); ???});</script></html>官网的demo是个html实现的pdf页面http://mozilla.github.io/pdf.js/web/viewer.html 也可以学习参考
参考http://mozilla.github.io/pdf.js/
pdf转为html查看pdf.js
原文地址：https://www.cnblogs.com/yiyi17/p/9264495.html