http://q.cnblogs.com/q/48507/
要修改引用的两个js文件, 附件.
<html>
<body>
<div>
<button id="prev" onclick="goPrevious()">Previous</button>
<button id="next" onclick="goNext()">Next</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
//
// NOTE:
// Modifying the URL below to another server will likely *NOT* work. Because of browser
// security restrictions, we have to use a file server with special headers
// (CORS) - most servers don't support cross-origin browser requests.
//
var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//
PDFJS.disableWorker = true;
var pdfDoc = null,
pageNum = 1,
scale = 0.8,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(num) {
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
});
// Update page counters
document.getElementById('page_num').textContent = pageNum;
document.getElementById('page_count').textContent = pdfDoc.numPages;
}
//
// Go to previous page
//
function goPrevious() {
if (pageNum <= 1)
return;
pageNum--;
renderPage(pageNum);
}
//
// Go to next page
//
function goNext() {
if (pageNum >= pdfDoc.numPages)
return;
pageNum++;
renderPage(pageNum);
}
//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
pdfDoc = _pdfDoc;
renderPage(pageNum);
});
</script>
</body>
</html>
分享到：
相关推荐
标题和描述中的“在页面直接打开PDF，兼容所有浏览器”意味着此解决方案能够跨越各种浏览器平台，包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer，确保无论用户使用何种浏览器，都能顺畅地查看PDF...
本文将重点介绍一种基于`jQuery`插件的方法，该方法通过使用`jquery.media.js`插件轻松实现了在浏览器中直接打开PDF文件的功能。 #### 技术细节 ##### jQuery Media Plugin `jquery.media.js`是一个强大的jQuery...
PDF.js能够提供高质量的PDF文档显示，并支持多种现代浏览器。使用PDF.js，开发者可以轻松地集成PDF预览到自己的Web应用中，提高用户体验，让用户能够直接在网页内查看PDF内容。 OpenOffice则是一个免费的办公软件...
总的来说，PDFSign.js为Web应用程序提供了一个强大的工具，使用户能够在浏览器内直接签署PDF文档，从而提升了用户体验并加强了数据安全性。对于那些需要在前端处理PDF签名的项目来说，这是一个非常有价值的解决方案...
HTML5手机网页PDF文件阅读器插件是一种技术解决方案，它允许用户在移动设备的Web浏览器上查看和交互PDF文档，而无需离开网页或下载额外的应用程序。这种技术基于HTML5，一个强大的网络标准，提供了丰富的功能和良好...
2. **浏览器内嵌PDF**：为了在浏览器中查看PDF，通常需要使用HTML5的`<iframe>`或`<object>`标签，或者使用特定的JavaScript库如PDF.js。这些方法可以让PDF文件直接在页面中加载，无需跳转到新的窗口或下载文件。 3...
总的来说，“pdf.js读取pdf文档”涉及到的技术栈包括前端的JavaScript（特别是PDF.js库的使用）、HTML5 Canvas绘图以及可能的PHP后端支持。开发者需要对这些技术有深入理解，才能构建出稳定且高效的PDF查看应用。
在移动设备上，使用H5（HTML5）和JavaScript实现PDF文件的查看功能已经成为一种常见的需求。本知识点主要探讨如何利用这些技术将PDF文件转换为数据流并在浏览器中呈现，无需借助任何第三方插件。 首先，我们需要...
本文将详细介绍如何使用HTML和JavaScript技术实现在浏览器中预览PDF、Excel、PPT、DOC、JPG以及PNG格式的文件。 首先，我们需要理解HTML和JavaScript在其中的作用。HTML是网页的基础结构语言，而JavaScript则是让...
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。pdf.js是一个HTML5技术的实验，探索实现一个没有本地代码支持，有效率的PDF渲染。 pdf.js是社区驱动和Mozilla Labs的支持。我们...
2. **使用JavaScript库**：如PDF.js，这是一个由Mozilla开发的开源库，专门用于在Web浏览器中渲染PDF文档，不受浏览器内置支持的限制。 3. **利用API服务**：如Google Docs Viewer API，可以提供一个URL来预览PDF，...
PDF.js 是一个由 Mozilla 维护的开源库，专门用于在 Web 浏览器中显示 PDF 文档。这个库利用 JavaScript 实现了 PDF 文件的解析和渲染，使得开发者能够在 HTML 页面上实现 PDF 的在线预览功能，而无需依赖任何插件。...
javascript直接打印word、excel和pdf文档 缺点：需要设置浏览器的安全级别，对ActiveX脚本可执行
PDF.js和PDF.Worker.js是Mozilla开发的开源库，用于在Web浏览器中渲染PDF文档，无需依赖任何插件。这两个JavaScript文件是实现HTML页面加载和显示PDF的关键组件，提供了纯JavaScript解决方案来处理PDF文档。 PDF.js...
总结，PDF.js是实现浏览器预览PDF文档的优秀解决方案，通过JavaScript和HTML5 Canvas技术，能够在浏览器环境中提供流畅的阅读体验。通过理解其工作原理和使用方法，开发者可以根据项目需求进行定制，以实现更丰富的...
在JavaScript（JS）中直接调用Word文档进行打印主要涉及到Web应用程序与本地文件系统的交互以及浏览器的安全限制。本文将深入探讨这一主题，并提供一些实现这一功能的方法。 首先，理解JavaScript在浏览器环境中的...
pdf.js提供了一套JavaScript API，可以解析PDF文件并将其转换为HTML5 Canvas元素，这样用户就可以在浏览器中浏览PDF文档的每一页。它支持跨平台，并且对各种现代浏览器有良好的兼容性。 要将pdf.js集成到Java Web...
此外，还可以考虑使用一些开源库，如PDF.js，它是Mozilla开发的一个纯JavaScript的PDF解析和渲染库，能够在浏览器中提供高质量的PDF预览体验。 总的来说，这个HTML5预览PDF文档的示例展示了如何利用现代Web技术实现...
目前，最常用的是PDF.js，这是一个由Mozilla开发的开源库，专门用于在浏览器中显示PDF文档。它利用了HTML5的Blob对象、Fetch API以及Canvas元素，将PDF内容转换为像素流并绘制到Canvas上。 以下是实现过程的关键...
这就需要专门的JavaScript库来优化这一过程，例如我们看到的"pdf.js"，它是Mozilla开源的一个项目，用于在浏览器中渲染PDF文档。 "pdf.js"插件的核心功能包括： 1. **跨平台兼容性**：该插件旨在支持多种平台，...