求

这两天碰到一个需求：在用户刷新页面或者关闭页面的时候，前端要给后台发一条请求，释放该页面的授权占用。

分析了一下，这不就是在页面卸载时发请求嘛，三下五除二就实现一版：

window.addEventListener("beforeunload", ()=> {
let oReq=new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "编程三昧"}));

测试发现：

• 刷新页面时基本满足需求（偶尔也会有后台接收不到请求的现象，但概率很低）
• 关闭页面时，后台接收不到请求

既然异步 Ajax 不行，那就试试同步的吧，结果直接报错了：

搜了一下，解释如下：

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

概括起来就是：对现在的 Chrome 来说，在页面导航离开或者被用户关闭时，不允许发送同步 XHR 请求，涉及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。

虽然问题没解决，但是却长知识了，这波不太亏！

navigator.sendBeacon()

后来通过搜索，看到有一个接口是专门来干这事的，那就是 navigator.sendBeacon() 。

描述

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。

语法

navigator.sendBeacon(url, data);

参数

• url 表明 data 将要被发送到的网络地址。
• data 参数是将要发送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 类型的数据。

返回值

当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

实现

既然有了接口，那实现起来就简单了。

代码

 window.addEventListener("beforeunload", (e)=> {
    const data={name: "编程三昧"};
    window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});

效果

不管是刷新页面还是关闭页面，后台都能接收到前端发送过来的请求，完美实现需求。

总结

浏览器现在功能越来越强大，支持的 API 也越来越丰富，放在之前很难实现的功能，现在可能就是轻而易举的事，还是要多关注技术动态。

~

~本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

近有一个业务是前端要上传word格式的文稿，然后用户上传完之后，可以用浏览器直接查看该文稿，并且可以在富文本框直接引用该文稿，所以上传word文稿之后，后端保存到db的必须是html格式才行，所以涉及到word格式转html格式。

通过调查，这个word和html的处理，有两种方案，方案1是前端做这个转换。方案2是把word文档上传给后台，后台转换好之后再返回给前端。至于方案1，看到大家的反馈都说很多问题，所以就没采用前端转的方案，最终决定是后端转化为html格式并返回给前段预览，待客户预览的时候，确认格式没问题之后，再把html保存到后台（因为word涉及到的格式太多，比如图片，visio图，表格，图片等等之类的复杂元素，转html的时候，可能会很多格式问题，所以要有个预览的过程）。

对于word中普通的文字，问题倒不大，主要是文本之外的元素的处理，比如图片，视频，表格等。针对我本次的文章，只处理了图片，处理的方式是：后台从word中找出图片（当然引入的jar包已经带了获取word中图片的功能），上传到服务器，拿到绝对路径之后，放入到html里面，这样，返回给前端的html内容，就可以直接预览了。

maven引入相关依赖包如下：

 <poi-scratchpad.version>3.14</poi-scratchpad.version>
        <poi-ooxml.version>3.14</poi-ooxml.version>
        <xdocreport.version>1.0.6</xdocreport.version>
        <poi-ooxml-schemas.version>3.14</poi-ooxml-schemas.version>
        <ooxml-schemas.version>1.3</ooxml-schemas.version>
        <jsoup.version>1.11.3</jsoup.version>

<dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-scratchpad</artifactId>
            <version>${poi-scratchpad.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>${poi-ooxml.version}</version>
        </dependency>
        <dependency>
            <groupId>fr.opensagres.xdocreport</groupId>
            <artifactId>xdocreport</artifactId>
            <version>${xdocreport.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml-schemas</artifactId>
            <version>${poi-ooxml-schemas.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>ooxml-schemas</artifactId>
            <version>${ooxml-schemas.version}</version>
        </dependency>
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>${jsoup.version}</version>
        </dependency>

word转html，对于word2003和word2007转换方式不一样，因为word2003和word2007的格式不一样，工具类如下：

使用方法如下：

public String uploadSourceNews(MultipartFile file)  {
        String fileName=file.getOriginalFilename();
        String suffixName=fileName.substring(fileName.lastIndexOf("."));
        if (!".doc".equals(suffixName) && !".docx".equals(suffixName)) {
            throw new UploadFileFormatException();
        }
        DateTimeFormatter formatter=DateTimeFormatter.ofPattern("yyyyMM");
        String dateDir=formatter.format(LocalDate.now());
        String directory=imageDir + "/" + dateDir + "/";
        String content=null;
        try {
            InputStream inputStream=file.getInputStream();
            if ("doc".equals(suffixName)) {
                content=wordToHtmlUtil.Word2003ToHtml(inputStream, imageBucket, directory, Constants.HTTPS_PREFIX + imageVisitHost);
            } else {
                content=wordToHtmlUtil.Word2007ToHtml(inputStream, imageBucket, directory, Constants.HTTPS_PREFIX + imageVisitHost);
            }
        } catch (Exception ex) {
            logger.error("word to html exception, detail:", ex);
            return null;
        }
        return content;
    }

关于doc和docx的一些存储格式介绍：

docx 是微软开发的基于 xml 的文字处理文件。docx 文件与 doc 文件不同, 因为 docx 文件将数据存储在单独的压缩文件和文件夹中。早期版本的 microsoft office (早于 office 2007) 不支持 docx 文件, 因为 docx 是基于 xml 的, 早期版本将 doc 文件另存为单个二进制文件。

DOCX is an XML based word processing file developed by Microsoft. DOCX files are different than DOC files as DOCX files store data in separate compressed files and folders. Earlier versions of Microsoft Office (earlier than Office 2007) do not support DOCX files because DOCX is XML based where the earlier versions save DOC file as a single binary file.

可能你会问了，明明是docx结尾的文档，怎么成了xml格式了？

很简单:你随便选择一个docx文件，右键使用压缩工具打开，就能得到一个这样的目录结构：

所以你以为docx是一个完整的文档，其实它只是一个压缩文件。

参考：

https://www.cnblogs.com/ct-csu/p/8178932.html