记ePub.js使用过程中的那些事

在尝试开发web阅读器时因为需要解决epub电子书格式的解析,我选择了ePub.js(其实也没别的库可以选择)
首先是关于ePub.js使用时的一些坑
1、这个库可以解析解压好的文件和压缩过的epub文件,但是要解析epub文件需要同时引入ePub.js和jszip两个库
2、解析epub文件必须使用静态资源,在后台返回流数据时怎么样都无法解析书本,并且脚本会尝试请求/META-INF/container.xml这个URI
3、现在网上所存在的关于epub.js的内容相当少,还有一些方法都已经没法使用,官方文档说明也不太清楚

关于第二点,我来分享下我的解决方法
首先,后台我使用的Springboot框架,所以我首先是将特定链接映射为静态资源地址,代码:

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    private String bookPath = "file:" + SettingUtil.BOOK_PATH;
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/epub/**").addResourceLocations(bookPath);
    }
}

这样当访问/epub/这个链接时就相当于访问了对应的静态资源,当然这样的话可能会产生安全问题,所以在此基础上我在controller上添加了个接口:

    @RequestMapping("/get/epub/**")
    public void epubDownload(HttpServletResponse response, HttpServletRequest request) throws IOException {
        Cookie user = BaseUtil.getCookieContent(request.getCookies(), SettingUtil.USER_COOKIE_ID);
        String uri = request.getRequestURI();
        if (user != null){
            String uuid = user.getValue();
            String bookName = uri.substring(uri.lastIndexOf('/'));
            String newURI = "/epub/" + uuid + bookName;
            response.sendRedirect(newURI);
        }

并且添加一个拦截器用于确认用户身份,防止用户通过url访问其他人的资源:

public class BookDownloadInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Cookie user = BaseUtil.getCookieContent(request.getCookies(), SettingUtil.USER_COOKIE_ID);
        String uri = request.getRequestURI();
        if (user != null){
            String uuid = user.getValue();
            String requestUuid = uri.substring(uri.indexOf("/epub/"), uri.lastIndexOf('/'));
            return !uuid.equals(requestUuid);
        }
        return true;
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

}

至此通过后台获取epub资源的部分就完成了,关于epub.js的使用我会另外发帖说明

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue是一种流行的JavaScript框架,而epub.js是一个用于在浏览器呈现EPUB电子书的开源库。Vue和epub.js可以很好地结合使用,以创建动态和交互式的EPUB电子书阅读器。 在使用Vue时,可以使用其强大的组件化特性将epub.js集成到Vue应用程序。通过将epub.js作为Vue组件的一部分,我们可以方便地管理和控制EPUB电子书的加载、显示和互动。 例如,可以创建一个名为EpubReader的Vue组件,该组件包含一个用于显示EPUB电子书内容的容器元素。在该组件的生命周期钩子,可以使用epub.js提供的API方法加载和渲染EPUB电子书。同时,还可以使用Vue的数据绑定和件监听来动态更新和响应EPUB电子书的变化。 在EpubReader组件,可以通过将epub.js提供的方法与Vue模板和方法进行关联,实现一些功能,例如切换章节、搜索、标注和添加书签等。通过Vue的响应式特性,可以实现EPUB电子书内部的数据变化与Vue组件之间的交互和更新。 除了基本的EPUB电子书阅读功能外,还可以使用Vue的插件系统和其他Vue库,进一步扩展和定制EPUB电子书阅读器。例如,可以使用Vue Router来实现EPUB电子书的路由导航,以及使用Vuex来管理EPUB电子书的全局状态。 总之,Vue和epub.js的结合能够提供一种高效、灵活和可交互的EPUB电子书阅读体验。通过借助Vue的组件化和响应式特性,我们能够更方便地开发和定制EPUB电子书阅读器,满足用户对于电子书阅读的各种需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值