前端頁面展示本地PDF文件

Ⅰ 前端HTML頁面轉PDF（html2canvas+jspdf）

utils - htmlToPdf.js

main.js

1、如果在多個頁面使用，給函數定義一個參數，參數為要導出頁面部分的id。

將 '#pdfDom' 替換為參數即可
2、將導出文件的名稱也作為參數傳入函數

此種方式也可用於vue，嘗試後可行，需要調節部分參數，但畢竟不太合適。
jQuery不需要調節。

https://github.com/zhangshaoliang/downLoadPDF

vue方式
jQuery方式

目前項目使用的是前端加後端方式，前端提供模板，echarts圖表的話需要轉為base64發送給後台。後台使用iText。目前存在的問題是後台不支持css3語法，只支持到css2，所以復雜的樣式頁面顯示錯亂，考慮個別頁面使用純前端實現。

網站導航

Ⅱ 怎麼將pdf文件可以在網頁上直接預覽

選擇用瀏覽器來打開目標PDF文件，即可實現在網頁上直接預覽PDF文件。

1、在電腦文件中，用滑鼠右鍵目標PDF文件。

Ⅲ 如何直接在網頁中顯示PDF文件

只要客戶端安裝了adobe，只需給pdf的鏈接地址即可在客戶端打開pdf文件。對於可識別的文件會在瀏覽器中直接打開。如果打不開的話，可以嘗試調整一下瀏覽器設置或者換一下瀏覽器（如chrome，360等）。

Ⅳ pdf.js 如何預覽本地文件

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

Ⅳ 如何實現springmvc將返回的給前端的pdf文件放在瀏覽器里預覽

1，在web路徑下建立一個uploadFiles文件夾。

2，在springMVC里映射文件就像映射靜態文件那樣。

<mvc:resources mapping="/pdf/**" location="/uploadFiles/"/>

3，寫個controller返回PDF的URL路徑。

@Controller
@CrossOrigin(origins = "*")
public class PDFController {

@ResponseBody
@RequestMapping(value = "/pdf", method = RequestMethod.GET)
public String pdfDownload() throws IOException
{
String retString = null;
String dir = XXXX文件在伺服器中路徑。
String path = httpServletRequest.getRequestURL() + dir.substring(dir.lastIndexOf('\'));
retString = path.replaceAll("\\","/");
Map<String,Object >map = new HashMap<>();
map.put("code",0);
map.put("pdf",retString);
return JSON.toJSONString(map);
}
}

4，返回的JSON數據。

{"code":0,"pdf":"8080/pdf/1472128890165sample.pdf"}，前面加上http://127.0.0.1:。

5,瀏覽器中直接打開pdf這個url就可以預覽PDF啦。

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

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

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

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

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

可以用flash顯示。