整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
PDF文件現(xiàn)在在許多企業(yè)中常用 - 無論您是要生成銷售報(bào)告，交付合同還是發(fā)送發(fā)票，PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由于它使用vanilla JavaScript實(shí)現(xiàn)PDF渲染，因此它具有跨瀏覽器兼容性，并且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象，本文僅介紹PDFJS。
https://mozilla.github.io/pdf.js/
官網(wǎng)提供了下載入口,有穩(wěn)定版和Beta版,我們要在生產(chǎn)環(huán)境下使用建議使用穩(wěn)定版,官網(wǎng)給我們提供了三種獲取PDF.js的方式
我們可以直接使用cdn服務(wù)，也可以將下載的文件引入，我們看一下示例代碼，這里我提供了兩種寫法，在項(xiàng)目運(yùn)行之前，請確保你的同級目錄下有一個(gè)test.pdf文件
//index.html
<!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">
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
<script src='./index.js'></script>
<title>PDF</title>
</head>
<body>
<canvas id="pdf"></canvas>
</body>
</html>
//index.js
// var loadingTask = pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加載第一頁
// pdf.getPage(1).then(function(page) {
// var scale = 1;
// var viewport = page.getViewport(scale);
// //應(yīng)用到頁面的canvas上.
// var canvas = document.getElementById("pdf");
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// // 渲染canvas.
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() {
// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async () => {
const loadingTask = pdfjsLib.getDocument("test.pdf");
const pdf = await loadingTask.promise;
// 加載第一頁.
const page = await pdf.getPage(1);
const scale = 1;
const viewport = page.getViewport(scale);
// 應(yīng)用到頁面的canvas上.
const canvas = document.getElementById("pdf");
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染canvas.
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext);
})();
當(dāng)我們運(yùn)行項(xiàng)目之后，打開瀏覽器查看，它已經(jīng)將pdf的內(nèi)容渲染到了瀏覽器中，且顯示了第一頁，如下圖所示：
如果就這樣的話遠(yuǎn)遠(yuǎn)是無法滿足我們使用的，因此我們來看一下它比較高級的用法，或者說簡單的用法，高級的功能。
首先我們將我們下載的js包加壓，復(fù)制里面的web文件夾，粘貼到你的項(xiàng)目目錄
然后修改你的index.html代碼，首先注釋掉之前引入的js代碼，然后修改body，如下
<body> <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe> </body>
隨后打開我們的瀏覽器，你會發(fā)現(xiàn)一個(gè)預(yù)覽的窗口
它繼承了我們常用的功能，比如旋轉(zhuǎn)、下載、打印、自適應(yīng)縮放、放大、縮小等，我們只需要使用iframe引入我們的pdf文件即可，其余的全部交給pdf來完成，即可獲得一個(gè)實(shí)現(xiàn)一個(gè)完整的pdf預(yù)覽功能。
PDFJS的這三層分開，讓我們很好的來根據(jù)業(yè)務(wù)需求來實(shí)現(xiàn)我們想要的部分，其簡單的api讓我們得心應(yīng)手，總而言之，PDFJS是一個(gè)絕佳的PDF預(yù)覽解決方案。
PDFJS不僅僅支持pdf的二進(jìn)制文件，同樣還支持base64編碼的pdf，如果在你的項(xiàng)目中需要用到pdf的預(yù)覽等功能，無疑它是一種良好的解決方案，當(dāng)然想要實(shí)現(xiàn)相同的功能有許多辦法，我們可以選擇最適合我們需求的，官方還提供了一個(gè)完整的演示Demo，如下截圖，如果你覺得本文對你有幫助，請麻煩轉(zhuǎn)發(fā)、點(diǎn)贊加關(guān)注吧，后續(xù)會分享更多實(shí)用有趣的技術(shù)！
本例分享實(shí)現(xiàn)PDF的預(yù)覽和下載功能，預(yù)覽分兩種方法。
1、利用a標(biāo)簽實(shí)現(xiàn)預(yù)覽和下載功能
對于需求要求不高是比較方便的方法，因?yàn)轭A(yù)覽功能在部分手機(jī)端是下載效果，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>預(yù)覽下載PDF</title>
</head>
<body>
<a href="./test.pdf" target="_blank">預(yù)覽</a>
<a href="./test.pdf" download="test" target="_blank">下載</a>
</body>
</html>2、利用pdf.js組件實(shí)現(xiàn)預(yù)覽功能
對于需求要求比較高可以利用pdf.js組件，可以兼容不同手機(jī)端同樣的預(yù)覽效果，代碼如下：
1、必須部署后才能正常使用預(yù)覽功能；
2、fileUrl為預(yù)覽文件地址，如果非“pdfjs/web”下的文件，需要使用部署路徑，如代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>預(yù)覽下載PDF</title>
</head>
<body>
<a href="javascript：;" onclick="previewPdf()">預(yù)覽</a>
<script>
function previewPdf() {
var fileUrl = '/study/js/previewPDF/test.pdf';
window.open('./pdfjs/web/viewer.html?file=' + fileUrl);
}
</script>
</body>
</html>Tips：
pdf.js下載地址：http://mozilla.github.io/pdf.js/getting_started/#download；
目錄架構(gòu)如下圖：
方式一、pdf文件理論上可以在瀏覽器直接打開預(yù)覽但是需要打開新頁面。在僅僅是預(yù)覽pdf文件且UI要求不高的情況下可以直接通過a標(biāo)簽href屬性實(shí)現(xiàn)預(yù)覽
<a href="文檔地址"></a>
方式二、通過jquery插件jquery.media.js實(shí)現(xiàn) 這個(gè)插件可以實(shí)現(xiàn)pdf預(yù)覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。 實(shí)現(xiàn)方式： js代碼：
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.media.js"></script> 復(fù)制代碼
html結(jié)構(gòu)：
<body> <div id="handout_wrap_inner"></div> </body> 復(fù)制代碼
調(diào)用方式：
<script type="text/javascript">
$('#handout_wrap_inner').media({
width: '100%',
height: '100%',
autoplay: true,
src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
});
</script>
復(fù)制代碼
方式三、直接通過頁面內(nèi)嵌iframe
$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復(fù)制代碼
此外還可以在iframe標(biāo)簽之間提供一個(gè)提示類似這樣
<iframe :src="previewUrl" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a> </iframe> 復(fù)制代碼
方式四、通過標(biāo)簽嵌入內(nèi)容
<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">
此標(biāo)簽h5特性中包含四個(gè)屬性：高、寬、類型、預(yù)覽文件src！ 與< iframe > < / iframe > 不同，這個(gè)標(biāo)簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個(gè)標(biāo)簽的內(nèi)容什么都看不到！
方式五、標(biāo)簽和iframe使用差別較小
<object :src="previewUrl" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a> </object> 復(fù)制代碼
除方式二以外其他都是直接通過標(biāo)簽將內(nèi)容引入頁面實(shí)現(xiàn)預(yù)覽
方式六、PDFObject
PDFObject實(shí)際上也是通過標(biāo)簽實(shí)現(xiàn)的直接上代碼
<!DOCTYPE html>
<html>
<head>
<title>Show PDF</title>
<meta charset="utf-8" />
<script type="text/javascript" src='pdfobject.min.js'></script>
<style type="text/css">
html,body,#pdf_viewer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
if(PDFObject.supportsPDFs){
// PDF嵌入到網(wǎng)頁
PDFObject.embed("index.pdf", "#pdf_viewer" );
} else {
location.href = "/canvas";
}
</script>
</html>
還可以通過以下代碼進(jìn)行判斷是否支持PDFObject預(yù)覽
if(PDFObject.supportsPDFs){
console.log("Yay, this browser supports inline PDFs.");
} else {
console.log("Boo, inline PDFs are not supported by this browser");
}
復(fù)制代碼
方式七、PDF.js
PDF.js可以實(shí)現(xiàn)在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強(qiáng)大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個(gè)庫文件，一個(gè)pdf.js和一個(gè)pdf.worker.js，一個(gè)負(fù)責(zé)API解析，一個(gè)負(fù)責(zé)核心解析。
word、ppt、xls文件實(shí)現(xiàn)在線預(yù)覽的方式比較簡單可以直接通過調(diào)用微軟的在線預(yù)覽功能實(shí)現(xiàn) (預(yù)覽前提：資源必須是公共可訪問的)
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'> </iframe> 復(fù)制代碼
src就是要實(shí)現(xiàn)預(yù)覽的文件地址 具體文檔看這微軟接口文檔
補(bǔ)充：google的文檔在線預(yù)覽實(shí)現(xiàn)同微軟（資源必須是公共可訪問的）
<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe> 復(fù)制代碼
3、word文件
XDOC可以實(shí)現(xiàn)預(yù)覽以DataURI表示的DOC文檔，此外XDOC還可以實(shí)現(xiàn)文本、帶參數(shù)文本、html文本、json文本、公文等在線預(yù)覽，具體實(shí)現(xiàn)方法請看官方文檔
下面這種方式可以實(shí)現(xiàn)快速預(yù)覽word但是對文件使用的編輯器可能會有一些限制
<a target="_blank" rel="nofollow">XDOC</a> 復(fù)制代碼
4、excel文件
目前excel文件已經(jīng)有了類似pdf.js那樣的解析sheet.js
總結(jié)：
1、免費(fèi)純前端方式實(shí)現(xiàn)在線預(yù)覽word、excel、ppt最優(yōu)選擇微軟在線預(yù)覽（不可編輯）
2、利用后端將文件轉(zhuǎn)為圖片，前端以圖片形式預(yù)覽（可行方案）
3、購買在線預(yù)覽服務(wù)例如百度DOC文檔服務(wù)、永中、I DOC VIEW等
著名：文章內(nèi)容是從網(wǎng)上搜集資料所得；在次發(fā)表只為自己以及頭條程序員兄弟日后使用圖個(gè)方便。
覺得有用記得收藏轉(zhuǎn)發(fā)！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
