前端程序員實現在線預覽pdf、word、xls、ppt等文件，超實用！

、前端實現pdf文件在線預覽功能

方式一、pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現預覽

<a href="文檔地址"></a>

方式二、通過jquery插件jquery.media.js實現這個插件可以實現pdf預覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。實現方式： js代碼：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
復制代碼

html結構：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
復制代碼

調用方式：

<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>
復制代碼

方式三、直接通過頁面內嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復制代碼

此外還可以在iframe標簽之間提供一個提示類似這樣

<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>
復制代碼

方式四、通過標簽嵌入內容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此標簽h5特性中包含四個屬性：高、寬、類型、預覽文件src！與< iframe > < / iframe > 不同，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到！

方式五、標簽和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>
復制代碼

除方式二以外其他都是直接通過標簽將內容引入頁面實現預覽

方式六、PDFObject

PDFObject實際上也是通過標簽實現的直接上代碼

<!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嵌入到網頁
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href = "/canvas";
 }
</script>
</html>

還可以通過以下代碼進行判斷是否支持PDFObject預覽

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
復制代碼

方式七、PDF.js

PDF.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負責API解析，一個負責核心解析。

2、word、xls、ppt文件在線預覽功能

word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提：資源必須是公共可訪問的)

<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>
復制代碼

src就是要實現預覽的文件地址具體文檔看這微軟接口文檔

補充：google的文檔在線預覽實現同微軟（資源必須是公共可訪問的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
復制代碼

3、word文件

XDOC可以實現預覽以DataURI表示的DOC文檔，此外XDOC還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽，具體實現方法請看官方文檔

下面這種方式可以實現快速預覽word但是對文件使用的編輯器可能會有一些限制

<a  target="_blank" rel="nofollow">XDOC</a>
復制代碼

4、excel文件

目前excel文件已經有了類似pdf.js那樣的解析sheet.js

總結：

1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽（不可編輯）

2、利用后端將文件轉為圖片，前端以圖片形式預覽（可行方案）

3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等

著名：文章內容是從網上搜集資料所得；在次發表只為自己以及頭條程序員兄弟日后使用圖個方便。

覺得有用記得收藏轉發！

揭秘knife4j：一招教你用JS實現全局參數實時刷新的實戰攻略

前言

在前后端分離的大潮下，API接口文檔的管理與調試變得尤為重要。Knife4j（原名Swagger-bootstrap-ui）作為一款優秀的 Swagger UI 實現方案，以其豐富的功能和友好的界面深受開發者喜愛。本文將針對其強大的全局參數實時刷新功能進行深入探討，通過JavaScript實現這一功能的實戰操作，幫助您提升工作效率。

一、Knife4j與全局參數簡介

1.1 Knife4j 簡介

Knife4j 是一個基于 Swagger2 和 OpenAPI 規范的第三方 UI 實現，它對原有的 Swagger UI 進行了大量優化與增強，提供了一種更為高效、易用的方式來管理和調試 RESTful API。

1.2 全局參數概念

在 Knife4j 中，全局參數是指在所有接口請求中都會使用的公共參數，如用戶身份令牌（Token）、版本號等。全局參數的實時刷新意味著每當這些參數值發生變化時，無需手動更新，所有關聯接口的請求結果會自動隨之改變。

二、全局參數配置與使用

2.1 配置全局參數

java
@Bean
public Docket createRestApi() {
    ParameterBuilder tokenPar = new ParameterBuilder();
    List<Parameter> pars = new ArrayList<>();
    tokenPar.name("token").description("認證token").modelRef(new ModelRef("string")).parameterType("header").required(false).build();
    pars.add(tokenPar.build());
    
    return new Docket(DocumentationType.SWAGGER_2)
            .globalOperationParameters(pars) // 設置全局參數
            // ...其他配置
}

在Java后端項目中，通常通過 Swagger2 的 `Docket` 類配置全局參數：

2.2 刷新機制原理

雖然Knife4j本身并不直接支持全局參數的實時刷新，但我們可以利用瀏覽器緩存、前端輪詢或WebSocket等技術實現實時更新。以下我們將采用JavaScript實現一個簡單的模擬示例。

三、運用JS實現全局參數實時刷新

3.1 前端監聽輸入變化

javascript
document.querySelector('#tokenInput').addEventListener('input', function() {
    refreshGlobalParams();
});

首先，我們需要在Knife4j的全局參數輸入框上添加事件監聽器，當參數值發生改變時觸發刷新動作。

3.2 刷新全局參數方法

javascript
function refreshGlobalParams() {
    // 獲取當前全局參數值
    const tokenValue = document.querySelector('#tokenInput').value;
    
    // 假設我們有一個接口列表，這里僅做演示
    const apiList = ['/api/user', '/api/product'];

    apiList.forEach(api => {
        // 使用Ajax或者Fetch發起請求，實際應用中請替換為你的請求庫
        fetch(api, { headers: { 'Authorization': `Bearer ${tokenValue}` } })
            .then(response => response.json())
            .then(data => console.log(`Refreshed data from ${api}:`, data))
            .catch(error => console.error('Error refreshing:', error));
    });
}

定義一個`refreshGlobalParams`函數，該函數負責重新發起所有接口請求，獲取最新的數據。

四、總結與進階

通過上述步驟，我們已經實現了全局參數在前端的實時刷新。然而在真實場景中，可能還需要考慮性能優化，例如采用節流或防抖策略來控制刷新頻率，以及結合WebSocket等技術實現實時推送更新。

盡管Knife4j本身并未內置全局參數實時刷新的功能，但借助前端JavaScript的強大能力，我們依然可以靈活地滿足這一需求。希望本篇攻略能助你在API管理與調試過程中更進一步，提高開發效率，享受更好的開發體驗。后續我們將持續探索更多 Knife4j 的高級玩法，敬請期待！

言

今天筆者要來給大家介紹一下接口，廢話不多說我們直接進入正文哈。

一、首先，什么是接口呢？

接口一般來說有兩種，一種是程序內部的接口，一種是系統對外的接口。
系統對外的接口：比如你要從別的網站或服務器上獲取資源或信息，別人肯定不會把數據庫共享給你，他只能給你提供一個他們寫好的方法來獲取數據，你引用他提供的接口就能使用他寫好的方法，從而達到數據共享的目的，比如說咱們用的app、網址這些它在進行數據處理的時候都是通過接口來進行調用的。
程序內部的接口：方法與方法之間，模塊與模塊之間的交互，程序內部拋出的接口，比如bbs系統，有登錄模塊、發帖模塊等等，那你要發帖就必須先登錄，要發帖就得登錄，那么這兩個模塊就得有交互，它就會拋出一個接口，供內部系統進行調用。

二、常見接口

1、webService接口：是走soap協議通過http傳輸，請求報文和返回報文都是xml格式的，我們在測試的時候都用通過工具才能進行調用，測試。可以使用的工具有SoapUI、jmeter、loadrunner等；

2、http api接口：是走http協議，通過路徑來區分調用的方法，請求報文都是key-value形式的，返回報文一般都是json串，有get和post等方法，這也是最常用的兩種請求方式。可以使用的工具有postman、RESTClient、jmeter、loadrunner等；

三、前端和后端

在說接口測試之前，我們先來搞清楚這兩個概念，前端和后端。

前端是什么呢，對于web端來說，咱們使用的網頁，打開的網站，這都是前端，這些都是html、css寫的；對于app端來說呢，它就是咱們用的app，android或者object-C（開發ios上的app）開發的，它的作用就是顯示頁面，讓我們看到漂亮的頁面，以及做一些簡單的校驗，比如說非空校驗，咱們在頁面上操作的時候，這些業務邏輯、功能，比如說你購物，發微博這些功能是由后端來實現的，后端去控制你購物的時候扣你的余額，發微博發到哪個賬號下面，那前端和后端是怎么交互的呢，就是通過接口。
前面說的你可能不好理解，你只需記住：前端負責貌美如花，后端負責掙錢養家。

四、什么是接口測試

接口測試是測試系統組件間接口的一種測試。接口測試主要用于檢測外部系統與系統之間以及內部各個子系統之間的交互點。測試的重點是要檢查數據的交換，傳遞和控制管理過程，以及系統間的相互邏輯依賴關系等。

OK，上面是百度百科上說的，下面才是我說的

其實我覺得接口測試很簡單，比一般的功能測試還簡單，現在找工作好多公司都要求有接口測試經驗，也有好多人問我（也就兩三個人）什么是接口測試，本著不懂也要裝懂的態度，我會說：所謂接口測試就是通過測試不同情況下的入參與之相應的出參信息來判斷接口是否符合或滿足相應的功能性、安全性要求。

我為啥說接口測試比功能測試簡單呢，因為功能測試是從頁面輸入值，然后通過點擊按鈕或鏈接等傳值給后端，而且功能測試還要測UI、前端交互等功能，但接口測試沒有頁面，它是通過接口規范文檔上的調用地址、請求參數，拼接報文，然后發送請求，檢查返回結果，所以它只需測入參和出參就行了，相對來說簡單了不少。

五、接口都由哪些部分組成呢？

首先，接口文檔應該包含以下內容：

1、接口說明
2、調用url
3、請求方法（get\post）
4、請求參數、參數類型、請求參數說明
5、返回參數說明

由接口文檔可知，接口至少應有請求地址、請求方法、請求參數（入參和出參）組成，部分接口有請求頭header。

標頭 (header)：是服務器以HTTP協議傳HTML資料到瀏覽器前所送出的字串，在標頭與 HTML 文件之間尚需空一行分隔，一般存放cookie、token等信息

有同學問我header和入參有什么關系？它們不都是發送到服務器的參數嗎？

OK，首先，它們確實都是發送到服務器里的參數，但它們是有區別的，header里存放的參數一般存放的是一些校驗信息，比如cookie，它是為了校驗這個請求是否有權限請求服務器，如果有，它才能請求服務器，然后把請求地址連同入參一起發送到服務器，然后服務器會根據地址和入參來返回出參。也就是說，服務器是先接受header信息進行判斷該請求是否有權限請求，判斷有權限后，才會接受請求地址和入參的。

六、為什么要做接口測試

大家都知道，接口其實就是前端頁面或APP等調用與后端做交互用的，所以好多人都會問，我功能測試都測好了，為什么還要測接口呢？OK，在回答這個問題之前，先舉個栗子：

比如測試用戶注冊功能，規定用戶名為6~18個字符，包含字母（區分大小寫）、數字、下劃線。首先功能測試時肯定會對用戶名規則進行測試時，比如輸入20個字符、輸入特殊字符等，但這些可能只是在前端做了校驗，后端可能沒做校驗，如果有人通過抓包繞過前端校驗直接發送到后端怎么辦呢？試想一下，如果用戶名和密碼未在后端做校驗，而有人又繞過前端校驗的話，那用戶名和密碼不就可以隨便輸了嗎？如果是登錄可能會通過SQL注入等手段來隨意登錄，甚至可以獲取管理員權限，那這樣不是很恐怖？

所以，接口測試的必要性就體現出來了：

①、可以發現很多在頁面上操作發現不了的bug

②、檢查系統的異常處理能力

③、檢查系統的安全性、穩定性

④、前端隨便變，接口測好了，后端不用變

七、接口測試怎么測

在進行接口測試前，還需要了解：

1）GET和POST請求：
如果是get請求的話，直接在瀏覽器里輸入就行了，只要在瀏覽器里面直接能請求到的，都是get請求，如果是post的請求的話，就不行了，就得借助工具來發送。
GET請求和POST請求的區別：

1、GET使用URL或Cookie傳參。而POST將數據放在BODY中。
2、GET的URL會有長度上的限制，則POST的數據則可以非常大。
3、POST比GET安全，因為數據在地址欄上不可見。
4、一般get請求用來獲取數據，post請求用來發送數據。

其實上面這幾點，只有最后一點說的是比較靠譜的，第一點post請求也可以把數據放到url里面，get請求其實也沒長度限制，post請求看起來參數是隱式的，稍微安全那么一些些，但是那只是對于小白用戶來說的，就算post請求，你通過抓包也是可以抓到參數的。所以上面這些面試的時候你說出來就行了。

2）http狀態碼

每發出一個http請求之后，都會有一個響應，http本身會有一個狀態碼，來標示這個請求是否成功，常見的狀態碼有以下幾種：

1、200 2開頭的都表示這個請求發送成功，最常見的就是200，就代表這個請求是ok的，服務器也返回了。
2、300 3開頭的代表重定向，最常見的是302，把這個請求重定向到別的地方了，
3、400 400代表客戶端發送的請求有語法錯誤，401代表訪問的頁面沒有授權，403表示沒有權限訪問這個頁面，404代表沒有這個頁面
4、500 5開頭的代表服務器有異常，500代表服務器內部異常，504代表服務器端超時，沒返回結果

接下來再說接口測試怎么測：

1）、通用接口用例設計

①、通過性驗證：首先肯定要保證這個接口功能是好使的，也就是正常的通過性測試，按照接口文檔上的參數，正常傳入，是否可以返回正確的結果。
②、參數組合：現在有一個操作商品的接口，有個字段type，傳1的時候代表修改商品，商品id、商品名稱、價格有一個是必傳的，type傳2的時候是刪除商品，商品id　　是必傳的，這樣的，就要測參數組合了，type傳1的時候，只傳商品名稱能不能修改成功，id、名稱、價格都傳的時候能不能修改成功。

③、接口安全：

1、繞過驗證，比如說購買了一個商品，它的價格是300元，那我在提交訂單時候，我把這個商品的價格改成3元，后端有沒有做驗證，更狠點，我把錢改成-3，是不是我的余額還要增加？
2、繞過身份授權，比如說修改商品信息接口，那必須得是賣家才能修改，那我傳一個普通用戶，能不能修改成功，我傳一個其他的賣家能不能修改成功
3、參數是否加密，比如說我登陸的接口，用戶名和密碼是不是加密，如果不加密的話，別人攔截到你的請求，就能獲取到你的信息了，加密規則是否容易破解。
4、密碼安全規則，密碼的復雜程度校驗

④、異常驗證：

所謂異常驗證，也就是我不按照你接口文檔上的要求輸入參數，來驗證接口對異常情況的校驗。比如說必填的參數不填，輸入整數類型的，傳入字符串類型，長度是10的，傳11，總之就是你說怎么來，我就不怎么來，其實也就這三種，必傳非必傳、參數類型、入參長度。

2）、根據業務邏輯來設計用例

根據業務邏輯來設計的話，就是根據自己系統的業務來設計用例，這個每個公司的業務不一樣，就得具體的看自己公司的業務了，其實這也和功能測試設計用例是一樣的。
舉個例子，拿bbs來說，bbs的需求是這樣的：

1、登錄失敗5次，就需要等待15分鐘之后再登錄
2、新注冊的用戶需要過了實習期才能發帖
3、刪除帖子扣除積分
4、......
　　像這樣的你就要把這些測試點列出來，然后再去造數據測試對應的測試點。

八、用什么工具測

接口測試的工具很多，比如 postman、RESTClient、jmeter、loadrunner、SoapUI等，首推的測試工具是postman和jmeter（測試框架的話，可以選擇Robot Framework Pytest等），接下來就簡單介紹下如何使用這兩款工具進行接口測試，其他工具本次暫不介紹。

1）Postman是谷歌的一款接口測試插件，它使用簡單，支持用例管理，支持get、post、文件上傳、響應驗證、變量管理、環境參數管理等功能，可以批量運行，并支持用例導出、導入。

2）jmeter是一款100%純Java編寫的免費開源的工具，它主要用來做性能測試，相比loadrunner來說，它內存占用小，免費開源，輕巧方便、無需安裝，越來越被大眾所喜愛。

總結

今天的分享就到這里了，喜歡的可以點贊收藏，加關注喲，關注我不迷路。

在線咨詢

上一篇：CSS繪制三角形和箭頭，不用再用圖片了
下一篇：編程VS工具，Html5地圖你選誰？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商