❶ 怎麼使用js，html5在瀏覽器直接打開pdf文檔
<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>
❷ HTML5 embed 標簽顯示的pdf的DOMO怎麼操作
一、基本語法 代碼如下: embed src=url 說明：embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。
❸ 怎麼讓html頁面以PDF格式顯示
判斷一下agent, 然後引用這個 https://github.com/mozilla/pdf.js
可以在各種支持html5的瀏覽器顯示pdf
另外,只有里Linux和Windows需要這個, Mac平台在系統底層原生支持pdf (就像Windows原生支持txt和zip一樣)所以不管什麼瀏覽器都可以直接顯示pdf格式.
❹ 如何在網頁中顯示PDF文件
使用js插件
其中實現閱讀pdf文件的js插件很多，比如：pdf.js：是一個技術原型主要用於在 HTML5 平台上展示 PDF 文檔，無需任何本地技術支持；jsPDF：是一個使用Javascript語言生成PDF的開源庫
這個 PDFObject.js，是一個 JavaScript 庫用來在HTML中動態嵌入 PDF 文檔。
js代碼：
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed();
};
</script>
OK,這樣就可以了。只要把地址寫對即可。
若我在某一個div中載入pdf咋辦呢？看官網，發現embed()方法可以有參數的，無參數是指body，有參數是具體的某一個位置。
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed(「div的id」);
};
</script>
當然,其中還可以進一步設置參數,比如你想以多少秒的速度預覽,有css,無css等
具體的官網如下：http$://$www.$pdfobject$.com/
請去掉$這個符號