這篇文章主要介紹了使用vue實現(xiàn)pdf文檔在線預覽功能的案例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！為您提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、成都網(wǎng)頁設(shè)計、小程序制作、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、手機APP定制開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司，等你一起來見證！

針對android系統(tǒng)不支持pdf文檔在線預覽，可通過引入pdf.js插件實現(xiàn)，其具體實現(xiàn)步驟如下

一、引入插件

方式一：npm install --save pdfjs-dist，安裝完成后在vue項目的node_modules出現(xiàn)如下依賴

方式二：只引入pdf.js的核心文件pdf.js和pdf.work.js,其他無關(guān)的文件全部刪除，如圖

方式三：將插件直接放在static文件夾下，如圖

二、前端頁面代碼

方式一和方式二：特點精簡

 

 

canvas {
 display: block;
 border-bottom: 1px solid black;
}

方式三：功能強大，但是引入過多無用文件，此種方式的filePath如為本地文件不進行編碼也可發(fā)送請求，如為跨域文件不進行編碼無法發(fā)送請求，因此建議統(tǒng)一進行編碼。

三、后臺代碼實現(xiàn)

后臺通過http請求將獲取的文檔流返回給前端

@Controller
public class ShowPdfController {
 @RequestMapping(name = "/showPdf")
 public String showPdf(HttpServletRequest request, HttpServletResponse response, String pdfUrl) {
 try {
  pdfUrl = pdfUrl.trim();
  URL url = new URL(pdfUrl);
  HttpURLConnection conn = (HttpURLConnection) url.openConnection();
  conn.setConnectTimeout(5*1000);
  InputStream inputStream = conn.getInputStream();
  response.setHeader("Content-Disposition", "attachment;fileName=show.pdf");
  response.setContentType("multipart/form-data");
  OutputStream outputStream = response.getOutputStream();
  IOUtils.write(IOUtils.toByteArray(inputStream), outputStream);
 } catch (Exception e) {
  e.printStackTrace();
 }
 return null;
 }
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“使用vue實現(xiàn)pdf文檔在線預覽功能的案例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

網(wǎng)站名稱：使用vue實現(xiàn)pdf文檔在線預覽功能的案例-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/icsic.html