js實現pdf在線預覽_pdfjs 無法在線預覽PDF

『壹』如何在瀏覽器中打開pdf文件並實現預覽的思路與代碼.pdf

其實也就是簡單的在瀏覽器中實現一個打開pdf文件，並有類似預覽功能的邊框。

其實在網上經常見到類似的頁面，在瀏覽器中打開pdf文檔，可大部分都是由於版權的原因使用了一些很特殊的技術，自然很難模仿了。
即使有直接在瀏覽器打開的例子，也必須手動點擊一下鏈接然後才能打開pdf文件。如何直接打開，而不用點擊鏈接呢看
本以為自己對js很熟，也就使用js模擬點擊，可就是不管用，沒辦法，只能在網上繼續尋找資料。最終想不到代碼卻很簡單。
最主要的是使用到了一個jquery的插件jquery.media.js，使用這個插件就很容易實現了。
核心代碼：
<html xmlns="/1999/xhtml"> <head runat="server"> <meta content="IE=7.0000" http-equiv="X-UA-Compatible"/> <title>pdf閱讀</title> <script type="text/javascript" src="pdfview_files/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="pdfview_files/jquery.media.js"></script> <script type="text/javascript"> $(function () { $('a.media').media({ width: 800, height: 800 }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="main"> <a class="media" href="../../災害性天氣典型個例/暴雨/河套西部一次局地大暴雨成因分析.pdf" id="PDFFile"> 河套西部一次局地大暴雨成因分析</a> </div> </form> </body> </html> 使用jquery.media.js就可以直接把一個連接到pdf文件的鏈接打開

『貳』怎麼實現前端HTML頁面在線預覽伺服器傳來的PDF和Word文件

首先我們想要實現在線瀏覽PDF文件，但是要知道想要將PDF文件進行在線瀏覽的話就只能使用一些在先瀏覽工具，我正好知道一個在線瀏覽網站挺不錯的，使用起來很方便，小夥伴們可以自己去嘗試這使用一下！

a.首先我們將瀏覽器進行打開，然後在網上搜索「迅捷PDF在線編輯」就可以搜索可以在先瀏覽的網站了

以上就是小編自己的看法，希望對小夥伴們有所幫助！

『叄』 JS如何做網頁預覽PDF,WORD等格式文件的功能類似於百度文庫那樣子

使用 FlashPaper2 在後台轉換PDF,WORD為FLASH,然後在前台調用展現。

『肆』 pdf.js 無法在線預覽PDF

你這個問題比較專業，回答起來比較麻煩，我們先來理一理該如何去解決問題，問題是：你是向要將PDF文件進行在線打開，去發現無法將文件進行打開。

原因可能是：

1.你的PDF文件和電腦起到沖突的原因

2.可能是文件在接收或者在下載的時候收到損壞！

如果是這個問題的話那就簡單，小編可以教你使用一個方法可以將它解決！

1.其實我們可以使用在線PDF轉換器就可以了，不僅可以對它進行在線的閱讀，還可以對它進行其他格式的在線轉換或者PDF文件的編輯！

以上就是我的個人見解，希望對小夥伴們有所幫助！

『伍』如何創建pdf的buffer，讓pdf.js實現預覽pdf文件

pdf.js簡介

PDF.js 是基於開放的 HTML5 及 JavaScript 技術實現的開源產品。簡單說就是一個 PDF
解析器。運用HTML5JavaScript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的PDF閱讀器pdf.js，直接在標準的HTML頁面上載入和渲染PDF文件, 還可以提高安全性（不需要安裝第三方插件，安全性由瀏覽器保證），瀏覽器所做的安全措施已經為pdf.js提供了安全的運行環境。其對IE和 FireFox瀏覽器的要求是IE9+, FireFox19+。

在線示例： http://jsbin.com/pdfjs-helloworld-v2/1/edit
， http://jsbin.com/pdfjs-prevnext-v2/1/edit

源碼：https://github.com/mozilla/pdf.js

官網：http://mozilla.github.io/pdf.js/

pdf.js VS 傳統瀏覽器讀取pdf

一般來說，PDF檔案格式都是在瀏覽器中由外掛程式來描繪，通常是Adobe自己的PDF
reader或來自其他供應商的描繪工具，但這些外掛通常無法充分運用PDF的特點，而且由於含有大量的受信任代碼，使得Google
Chrome瀏覽器必須運用SandBox沙箱原理，來檢查PDF描繪工具是否遭到未知病毒感染。

使用adobe，必須在本地安裝軟體才能使用，而pdf.js不依賴環境、渲染速度快（測試過，確實很快）、安全性高。

pdf.js渲染PDF文件

pdf.js渲染PDF文件的流程：Fetch pdf (url / buffer) ——> canvas ——> 渲染

如果要深入pdf的渲染，需要去研究pdf.js源代碼。pdf.js可通過pdf文件的地址或pdf數據流獲取pdf，具體實現是調用介面函數 PDFJs.getDoc(url/buffer)將pdf載入html，通過canvas處理, 然後渲染pdf文件。網上給出的都是通過url來獲取pdf的例子，而我在做項目的時候，後台（Python）要求是發pdf的數據流給前台，前台接收pdf的buffer,然後通過pdf.js來渲染。當然最初嘗試buffer出現了很多問題，具體問題總結如下：

1）如何通過$.ajax接收後台發給前台的buffer數據；

2）如何將buffer傳給pdf.js來處理（這里我使用了viewer.js, 所以需要考慮的是如何將buffer傳給viewer.js來處理）；

3）如何將pdf.js轉換成pdf.js可以接收的buffer格式；

（對應問題解決見代碼注釋）

註：viewer.js是pdf.js的擴展，其將列印、翻頁、縮放等功能進行了實現，且界面非常好看。也就是說如果你引入了viewer.js，pdf的渲染和渲染之後的功能界面都已經幫你實現了，你不用自己去寫界面。

先從官網：http://mozilla.github.io/pdf.js/ 下載代碼，然後使用文件viewer.html
, 我的html就是在viewer.html 的基礎上修改的，下面我給出buffer的例子：

<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<title>在線預覽</title>
{% load static %}{% get_static_prefix as STATIC_URL %}
<link href="{{STATIC_URL}}css/preview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{STATIC_URL}}pdfjs/web/viewer.css"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/compatibility.js"></script>
<link rel="resource" type="application/l10n" href="{{STATIC_URL}}pdfjs/web/locale/locale.properties"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/l10n.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/build/pdf.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/debugger.js"></script>
<script src="{{STATIC_URL}}js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">

//convertDataURIToBinary()

//不知道什麼原因如果後台直接將pdf的數據流發給前台，得到的是亂碼，將數據轉換成 Uint8Array始終不成功

//所以就讓後台將發送之前的數據流做了base64編碼發給前台，前台再解碼得到的數據就不是亂碼了。

var BASE64_MARKER = ';base64,';

var preFileId = {{mark}};

//viewer.js全局變數,傳入buffer，回答問題2
var DEFAULT_URL

$(document).ready(function(){
$.ajax({
type:"post",
async: false,

//ajax接收pdf數據流，注意dataType值的設置是否有錯，如果不指定，jQuery將自動根據HTTP包MIME信息返回

//responseXML或responseText
. 回答問題1
contentType:"application/pdf;charset=utf-8",
url:"{% url netPan.File.views.browserFuf%}",
data:{
id: preFileId
},
success:function(data){
var pdfAsDataUri = data;

//如果引入了viewer.js , 處理方法
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;

// 只引入了pdf.js, 未引入viewer.js，處理方法

// var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);

// PDFJS.getDocument（pdfAsArray).then(); 自己寫pdf的處理函數

}
});
});

function convertDataURIToBinary(dataURI) { //編碼轉換，回答問題3

var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;

//轉換成pdf.js能直接解析的Uint8Array類型,見pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));

for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
</script>


<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/viewer.js"></script>
</head>

<body>

省略內容

</body>

</html>

『陸』使用jQuery的PDF查看器問題，怎麼解決

jquery.media.js 插件實現在線預覽PDF文件

代碼：

[html]view plain

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>在線預覽PDF文檔</title>
<linkrel="stylesheet"href="bootstrap-3.3.7/css/bootstrap.min.css">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.media.js"></script>
<scripttype="text/javascript">
$(function(){
$('a.media').media({width:800,height:600});
});
</script>
</head>
<body>
<center>
<divclass="panelpanel-primary">
<divclass="panel-heading"align="center">
<h2>預覽pdf文件</h2>
</div>
<divclass="panel-body">
<aclass="media"href="yulan.pdf"></a>
</div>
</center>
</body>
</html>

截圖：

『柒』 pdf.js 如何預覽本地文件

pdf.js預覽文件必須只能是在伺服器部署的項目路徑下，不能通過修改配置的方式支持本地路徑的文件，否則會有js跨域問題。如果要顯示本地文件，可以折中考慮先做一個上傳功能將文件上傳到伺服器上然後在頁面上展示，這樣基本實現了預覽本地文件。

『捌』前台js 如何使用pdf.js預覽pdf文件流（base64）

將pdf流生成pdf文件，然後在將pdf文件使用PDF.js進行查看。
你需要考慮瀏覽器兼容性，低版本瀏覽器可能沒辦法支持。
參照 File API 和URL API(URL.createObjectURL())

『玖』用jquery插件實現pdf文件的在線預覽，大概是怎麼個思路

其實也就是簡單的在瀏覽器中實現一個打開pdf文件，並有類似預覽功能的邊框。

其實在中國上經常見到類似的頁面，在瀏覽器中打開pdf文檔，可大部分都是由於版權的原因使用了一些很特殊的技術，自然很難模仿了。
即使有直接在瀏覽器打開的例子，也必須手動點擊一下鏈接然後才能打開pdf文件。如何直接打開，而不用點擊鏈接呢？
本以為自己對js很熟，也就使用js模擬點擊，可就是不管用，沒辦法，只能在中國上繼續尋找資料。最終想不到代碼卻很簡單。
最主要的是使用到了一個jquery的插件jquery.media.js，使用這個插件就很容易實現了。
核心代碼：
河套西部一次局地大暴雨成因分析使用jquery.media.js就可以直接把一個連接到pdf文件的鏈接打

『拾』 js怎麼實現將流寫成文件實現pdf在線預覽

Viewer JS預覽pdf文件，其pdf文件只能url地址，不支持獲取文件流到客戶端，生成blob地址預覽。而PDFJS能夠支持

導航:首頁 > 文檔加密 > js實現pdf在線預覽

js實現pdf在線預覽

與js實現pdf在線預覽相關的資料