怎么实现前端HTML页面在线预览服务器传来的PDF和Word文件

pdf可以通过jq插件预览

word可以通过office online接口预览，但是接口问题是文件下载地址暴露且服务器必须在外网，安全性不佳

你可以去后盾人平台看一下，里面的东西不错

功能需求： 前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。 思路如下： 前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。 首先 我们看一下uniapp的官方文档：https://uniapp.dcloud.io/api/media/image?id=chooseimage大概是这样的 先写一个模拟的demo 1：首先我是是用了colorUI的框架，在项目里面引入 在page底下的vue文件引入 这样一来，就不需要写什么样式了，直接使用写好的就行了。 效果是这样的 每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。 在 chooseImage 选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。 若是请求成功 则返回一个图片链接 添加接口之后 的，demo如下：

1，在web路径下建立一个uploadFiles文件夹。

2，在springMVC里映射PDF文件就像映射静态文件那样。

<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啦。

---