A. 移動端在線預覽pdf文件的插件
目前的移動端瀏覽器,應該都原生支持pdf預覽了
B. js怎麼實現點擊一個按鈕 可以打開一個PDf文檔在線預覽(類似百度文庫)
我也在找,不過找了半天發現,在線預覽是後台代碼寫的,,前台js實現不了
C. js怎麼實現將流寫成文件實現pdf在線預覽
Viewer JS預覽pdf文件,其pdf文件只能url地址,不支持獲取文件流到客戶端,生成blob地址預覽。而PDFJS能夠支持
D. 有人做過 Node.js 在線預覽讀取 Office 系列文檔的功能么
題主是指的node.js嗎?這個好像不能直接實現在線預覽文檔功能。題主要想在線預覽文檔的話,可以用巴別鳥,登錄web版,就能在線預覽office、pdf、iworks等文檔。
E. 如何創建pdf的buffer,讓pdf.js實現預覽pdf文件
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>
<!--先設置全局變數DEFAULT_URL 的值,所以要後調入viewer.js -->
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/viewer.js"></script>
</head>
<body>
省略內容
</body>
</html>
F. 怎麼實現前端HTML頁面在線預覽伺服器傳來的PDF和Word文件
首先我們想要實現在線瀏覽PDF文件,但是要知道想要將PDF文件進行在線瀏覽的話就只能使用一些在先瀏覽工具,我正好知道一個在線瀏覽網站挺不錯的,使用起來很方便,小夥伴們可以自己去嘗試這使用一下!
a.首先我們將瀏覽器進行打開,然後在網上搜索「迅捷PDF在線編輯」就可以搜索可以在先瀏覽的網站了
以上就是小編自己的看法,希望對小夥伴們有所幫助!
G. pdf.js 無法在線預覽PDF
你這個問題比較專業,回答起來比較麻煩,我們先來理一理該如何去解決問題,問題是:你是向要將PDF文件進行在線打開,去發現無法將文件進行打開。
原因可能是:
1.你的PDF文件和電腦起到沖突的原因
2.可能是文件在接收或者在下載的時候收到損壞!
如果是這個問題的話那就簡單,小編可以教你使用一個方法可以將它解決!
1.其實我們可以使用在線PDF轉換器就可以了,不僅可以對它進行在線的閱讀,還可以對它進行其他格式的在線轉換或者PDF文件的編輯!
以上就是我的個人見解,希望對小夥伴們有所幫助!
H. 怎麼在線預覽伺服器傳來的PDF和Word文件
可以用flash顯示。
I. 用jquery插件實現pdf文件的在線預覽,大概是怎麼個思路
你使用的是什麼插件?現在pdf插件,我使用的不錯的有PDFObject、pdfjs插件。
J. web如何實現客戶端列印在線文件(pdf,word,excel等),同時可以控制列印設置
瀏覽器本身並不支持,可能通過客戶端安裝一些軟體。然後瀏覽器中js調用實現。
方案1:本地軟體開了http伺服器,監聽一個埠。瀏覽器中通過127.0.0.1發jsonp請求和本地軟體通信
方案2:瀏覽器中js瀏覽器擴展通信,擴展再和本地軟體通信。可以參考chrome extension api