vue预览word文档定位行

JavaScript022

vue预览word文档定位行,第1张

1 将文件放在前端静态文件中 实现本地预览 但前端包变得很大 多文件不适合

2 通过跳转外网链接访问 但内网无法使用

3 综合考虑 利用浏览器自带的预览pdf 将文件放在服务器指定目录下

前端代码量很少 无需任何插件 只需调用后端接口(将文件转换为流) 内外网均可预览

新建一个vue项目。打开控制命令行程序(CMD),运行命令: vue init webpack “项目名称”

安装依赖,在控制命令行程序(CMD),运行命令:npm install 或者 cnpm install.

实现预览

这里先以word为例。首先运行命令:npm install mammoth,这是预览word的一个插件,必须要安装;在static文件夹下放一个.docx为后缀的word文件

其中引入的三个.js 文件是实现手势缩放、旋转、移动的方法,也可以不引入;

然后修改一下config文件夹下的index.js文件,将host改为0.0.0.0,只要手机和电脑在同一个域名ip下,就可以用手访问项目查看预览效果(ip地址:端口号)

excel、pdf预览都是一样,只是引入的插件不一样

excel预览运行命令:npm install xlsx,页面引入import XLSX from ‘xlsx’

pdf预览运行命令:npm install --save vue-pdf,页面引入import pdf from ‘vue-pdf’

gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview

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

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

其实不一定要用Flash或者PDF,HTML更好。

目前找到的几种方式:

1.像以前的百度文库那样,先转换成flash,然后放在网页上。

说明:使用软件OpenOffice/LibreOffice,swftools。

优点:在国内,由于Flash安装量很大,而且很多人用IE和Chrome内核的浏览器,所以是可以查看的。

缺点:OpenOffice/LibreOffice转换的结果可能会丢失格式/排版(我没试过所以不知道会不会),而且比较耗服务器资源,如果浏览器没装Flash就没法查看文档了,尤其是移动端。

2.转换成PDF,然后用Mozilla的pdf.js查看。

说明:转换成PDF的方法可以用OpenOffice/LibreOffice,也可以用七牛的第三方服务“文档转换”(由亿方云提供)。

优点:如果是把文件存放在七牛云,用在线的服务会比较有保障,加载速度也快。

缺点:收费,不过费用很低廉,pdf.js可能比较大,加载相对慢点,放到七牛上面会好些,对移动端支持不好。

3.转换成HTML,像现在的百度文库那样。

说明:使用PHPOffice和PDFtoHTML将文档转换成HTML直接在浏览器输出,类似现在的百度文库。

优点:浏览器无需安装任何插件,也不用担心兼容性问题,还支持移动端。

缺点:可能会丢失格式,而且用户可以直接拷贝文档内容,如果是扣积分下载的话,可能达不到目的。