前端程序员实现在线预览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 href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" 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小时内与您取得联系。

整合营销服务商