【vue2】纯前端实现本地的pdf/word/epub文件预览 |
您所在的位置：网站首页 › js如何实现word转pdf › 【vue2】纯前端实现本地的pdf/word/epub文件预览 |
|
前言
需求是预览本地的pdf/word/epub格式的文件，但是搜索后发现没有可以直接使用的，格式不同，显示的方式和效果也都略有不同。 最后还是分别实现预览的功能。 实现 pdf方案：pdfjs+iframe 因为这样可以使用浏览器自带的pdf阅读器，不需要再自己实现小图预览等功能。 docx Mammoth旨在转换 .docx 文档（例如由 Microsoft Word 创建的文档），并将其转换为 HTML。 不支持样式。 Vue Word预览之mammoth.js docx-preview我的博客：关于实现 epub功能：实现预览、电子书切换、目录、换背景色、字体大小调整、进度的功能。 方案：使用epub.js 版本选择：使用epub对电子书进行渲染（Blocked script execution in 'http://localhost:8080/’ because the document 's frame is sandboxed and the ‘allow-scripts’ permission is not set.），出现了上述报错，原因是epub.js版本太高，所以切换了版本。省流：版本是[email protected] 参考文章： epub.js制作电子书阅读网站 有demo,有源码。不过功能还存在一些问题（比如电子书切换之类的有bug）。 注释还是比较详细的。可以体验参考基于Vue创建的epub小说阅读器效果展示及源码分享 主要是在这篇文章内容上进行移植二改。因为提供了源码。功能也比较全。 二次开发的记录 获取总页数： this.book.ready .then(() => { this.navigation = this.book.navigation; return this.book.locations.generate(); }) .then((result) => { this.locations = this.book.locations; this.bookAvailable = true; // 获取总页数 this.totalPages = this.locations.length(); // console.log("Total pages: " + this.totalPages); });2.左右翻页或跳转页数 通过父子组件间通信传递当前的页码、监听左右翻页或输入页码跳转。 //epub翻页 prevPage() { if (this.rendition) { console.log("prev"); this.rendition.prev(); this.currentPage--; // 向前翻页时更新 currentPage } }, nextPage() { if (this.rendition) { try { this.rendition.next(); this.currentPage++; // 向后翻页时更新 currentPage } catch (error) { console.log("EPUB 下一页出错：", error); alert("出错，请重试或检查 EPUB 文件格式。"); } } },注意：“跳转到对应页”这个功能是在子组件中进行监听实现的， 子组件不能直接修改父组件的值，所以需要中转一下。在子组件中使用currentPageLocal（进行页码的显示或者是传递） currentPage: { handler: function (value) { this.currentPageLocal = value; }, }, 后记关于epubjs写得不是很详细，因为是在前面的源码上二改的。所需要的功能也不多。（单页+上下滑动显示不知道怎么实现） 关于pdf的预览，其实直接用vue-pdf也是不错的。 后面补充吧。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |