html頁面線上預覽PDF檔案
依賴:jquery.media.js,自行百度下載
下載後放入指定位置,例:/static/js/lib/jquery.media.js
靜態頁面核心程式碼:
<div id="pdf_preview"></div>
以上靜態頁面還需要引入js檔案和依賴
<script src="#springUrl('/static/js/sys/test.js')"></script>
<script type="text/javascript" src="/static/js/lib/jquery.media.js"></script>
test.js檔案核心程式碼:
src = '******.pdf';
$('#pdf_preview').media(
{
width : '1380px',
height : '800px',
autoplay : true,
src : src,
});
src屬性寫入pdf檔案的訪問路徑,放在專案中的相對路徑或放在伺服器中的絕對路徑都可以訪問到。
上個效果圖:(支援縮放,全屏,旋轉,線上下載,列印)
相關推薦
html頁面線上預覽PDF檔案
依賴:jquery.media.js,自行百度下載 下載後放入指定位置,例:/static/js/lib/jquery.media.js 靜態頁面核心程式碼: <div id="pdf_preview"></div> 以上靜態頁面還需要引入js
Jquery.media.js實現網頁線上預覽pdf檔案
近期在工作中遇到了需要在網站預覽pdf檔案的需求,網上的資料很多,我使用了其中一種,即使用 Jquery.media.js包實現。 首先需要準備兩個內容: 1,jquery.js,任意版本 2,jquery.media.js,可以從網上搜,或者去下面我提供的地方下載(是我上傳的),
ionic3專案實現線上預覽PDF檔案
這裡參考了大牛提供的預覽外掛完成自己需要實現的功能,ng2-pdf-viewer,該外掛不支援ionic3的懶載入,廢話少說,直接擼程式碼。 第一步,安裝 ng2-pdf-viewer npm install ng2-pdf-viewer --save 第二步,在專案中新建頁面
瀏覽器中線上預覽pdf檔案(不使用外掛)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="jquer
java線上預覽pdf檔案或圖片檔案
在專案中需要使用到線上瀏覽檔案功能,由於專案中只能上傳pdf和圖片檔案,所有就只做了預覽pdf和圖片的功能。 在頁面中的程式碼如下: <a onclick="show(show_attach?filePath="+path+"&type="+type+")"
使用tcpdf軟體 線上預覽pdf檔案
<?php require_once('/var/www/html/htdocs/tcpdf/config/lang/eng.php');//包含兩個檔案就載入tcpdf庫 require_once('/var/www/html/htdocs/tcpdf/tcpdf.
關於Android 線上預覽PDF檔案
Android PdfViewer: 專案地址: https://github.com/barteksc/AndroidPdfViewer 功能很強大, 使用也比較廣, 親測可以使用. 唯一的缺點 :新增到專案中 會使apk增加16M, 這是最不能接受
jquery.media.js 外掛實現線上預覽PDF檔案
程式碼: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content
前端實現線上預覽pdf、word、xls、ppt等檔案
1、前端實現pdf檔案線上預覽功能 方式一: 通過a標籤href屬性實現 pdf檔案理論上可以在瀏覽器直接開啟預覽但是需要開啟新頁面。在僅僅是預覽pdf檔案且UI要求不高的情況下可以直接通過a標籤href屬性實現預覽 <a href="文件地址"></
jsp實現線上預覽pdf、word、xls、ppt等檔案
最近在做一個共享數字化平臺,一些所涉功能知識記錄一下。 、其他教程寫得太老了,可能到如今已經不再適用。 1、jsp實現pdf檔案線上預覽功能 方式一、pdf檔案理論上可以在瀏覽器直接開啟預覽但是需要開啟新頁面。在僅僅是預覽pdf檔案且UI要求不高的情況下可以直
將HTML頁面自動儲存為PDF檔案並上傳的兩種方式(一)-前端(react)方式
一、業務場景 公司的樣本檢測報告以React頁面的形式生成,已調整為A4大小的樣式並已實現分頁,業務上需要將這個網頁生成PDF檔案,並上傳到伺服器,後續會將這個檔案傳送給客戶(這裡不考慮)。 二、原來的實現形式 瀏覽器原生方法:window.print()可以將網頁儲存為PDF檔案,由於檢測報告
.net mvc使用FlexPaper外掛實現線上預覽PDF,EXCEL,WORD的方法
FlexPaper外掛可以實現在瀏覽器中線上預覽pdf,word,excel等。 在網上看到很多關於這個外掛實現預覽的技術,但是很難做到word和excel線上預覽。 pdf很好實現。 首先下載相關的外掛資訊,這裡不多說了。 其中這個外掛主要需要配合As
Word轉html實現線上預覽
word轉html,可以同時支援doc和docx兩種格式,非常好用 開發工具:idea 專案管理工具:maven 不多說,直接擼程式碼 1、首先配置pom.xml檔案,具體配置如下 2、工具類的開發 /** * WORD轉HTML docx格式 * POI版本: 3.10-
網頁上預覽pdf檔案的幾種方案
網頁上檢視pdf的方案: 1.使用adobe reader的外掛 2.使用線上office控制元件 3.使用火狐開源專案pdf.js(瀏覽器需支援html5) 4.將pdf轉換為swf檔案 5.使用pdfobject.js 下面我來講一
H5通過流的方式預覽PDF檔案實踐總結:
前言: 最近領導讓研究H5如何通過後端返回流的方式去預覽PDF檔案,通過實踐,現總結如下: 外掛目錄如下圖: 當下載下來後,為做測試,將目錄檔案直接部署線上伺服器,去直接訪問viewer.html看是否能成功,輸入地址: ‘線上地址域名:’ + p
實現線上預覽PDF的幾種解決方案
因客戶需要實現PDF的預覽處理,在網上找了一些PDF線上預覽的解決方案,有的用PDFJS的線上預覽方式,有的使用PDFObject的嵌入式顯示,有的通過轉換JPG/PNG方式實現間接顯示的方式,開始是想通過簡單的方式,能夠使用JS外掛實現預覽最好,可是線上預覽總是有一些不足,如不同瀏覽器的相容問題,甚至不同的
vue專案中使用pdf.js預覽pdf檔案
專案要求需要預覽pdf檔案,網上找了很久,大多數都是推薦pdf.js,自己起了解了一下,最後決定用pdf.js, 但是發現,在vue中使用這個很少!!!!!所以我就寫這一篇幫助一下vue使用pdfjs的朋友! 其實 這和前端框架無關的,直接使用pdf.js原生
上傳圖片能在HTML頁面顯示預覽
一、HTML頁面: <!DOCTYPE html> <html> <head>
pdf.js預覽pdf檔案
專案中需要做一個office線上預覽的功能,所以用到了pdf.js 下載對應官方檔案, 然後 <a href="plug-in/pdfjs/web/viewer.html?file=./../../../${dmdocPage.mainFile.swfpath}
移動端利用pdf.js實現線上預覽pdf文件
專案中要求在移動端實現線上預覽pdf檔案,通過一番折騰,最後選擇用pdf.js實現。1、下載pdf.js 官網地址:https://mozilla.github.io/pdf.js/2、各種配置 下載下來的檔案包,就是一個demo,我們仿照這個demo做就可以啦