vue-pdf.js 在线预览问题

JavaScript041

vue-pdf.js 在线预览问题,第1张

最近修改公司vue项目中使用pdf.js来实现在线预览上传的各类文件.由于使用pdf.js在预览时是直接在标签内将src属性赋值为要请求的地址.这就导致一个问题,会直接请求服务器的文件路径地址,而这个服务器文件路径就会暴露出来。处于安全性考虑在预览请求时不再返回地址，改为通过调用普通接口,而是统一返回流（word,pdf）或者base64(jpg,png...)。.前端再进行解析并实现在线预览.

此时遇到第一个问题：

        这个请求是在插件中进行的无法携带项目中封装的各类请求头信息（token..等）。 翻看pdf.js源码及网上总结.发现一个底层方法 

         该方法可传一个对象作为参数,对象内可以添加url(所请求的接口),headers(请求头信息)等.... . 有了这个方法就好处理了.

         最后在将该方法当做变量赋值给pdf的src.大功告成.

         最后再补充一些 : @loaded="docLoaded" @page-loaded ="pageLoaded" 这两个方法为加载预览文件时的loading事件,

最后引一波示例,

    最近公司项目要求对之前后端excel操作做优化，需要放到前端来做。讲道理，我觉得没啥子必要，尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子，还是要先自己做出来看看实际效果才行，我直接原地6个点......

导出

     安装依赖

        cnpm i xlsx --save

     实现

         定义公共组件Excel，该组件需要提供导出按钮，当点击时触发相应逻辑

         组件可接收的参数如下

                默认值如下

             根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示

             当点击导出按钮，触发回调

                引入xlsx

                导出逻辑

                首先要做的就是校验是否用户自己实现了导出函数，以及传入的数据是否为数据且是否为空，由于不止导出要用，故放到untils中作公共函数，其他的辅助函数也从中导出

                     isVoid函数

                      getTable函数

                     getSheetHead函数

                     format函数

                     getCharCol函数

             导出结果如下

     改进

        可能你也发现了，导出的结果是没有样式信息的,那么如何增加样式呢？答案是xlsx-style

         安装依赖

            cnpm i xlsx-style --save

            npm install file-saver --save

         xlsx-style导入报错

            将报错文件copy一份，修改后放到assets目录下

            找到umijs的webpack配置文件，新增如下配置

         增加文字颜色和首行高亮处理

                增加辅助函数calculateWidth

                增加辅助函数addHeadlineStyle

                导出方式使用filesave

                效果如下

导入

        现在，我们来完成导入功能，并且导入后需要使用表格进行分页预览

         新增modal弹窗，用作预览界面

        对应函数renderBody如下

        对应函数renderButton如下

        对应函数onPageChange如下

        点击导入按钮，回调处理如下

        新增的辅助函数如下

        新增组件状态如下

        导入预览效果如下

文档

    https://www.npmjs.com/package/xlsx-style

    https://github.com/eligrey/FileSaver.js

    https://www.npmjs.com/package/xlsx?activeTab=readme

如有问题，欢迎评论指正哦~~

最后，还有个很重要的事情，点个赞再走吧，客官~~

Excel这部分可以用SpreadJS,这是一个纯前端的控件，用于在线Excel表格展示预览操作。既然你是要实现在线预览，肯定是要包含前端的，SpreadJS本身是纯前端的，任何服务端语言都可以与之结合，所以java肯定也没问题。

Word这块可以找一找网上比较好的富文本工具，也可以实现word的在线预览。