你知道關閉頁面時怎么向后臺發送消息嗎？

求

這兩天碰到一個需求：在用戶刷新頁面或者關閉頁面的時候，前端要給后臺發一條請求，釋放該頁面的授權占用。

分析了一下，這不就是在頁面卸載時發請求嘛，三下五除二就實現一版：

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 也越來越豐富，放在之前很難實現的功能，現在可能就是輕而易舉的事，還是要多關注技術動態。

~本文完，感謝閱讀！

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！你歸，無論得失，唯以余韻相贈！
知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

年(Light Year Admin)后臺管理系統模板是一個基于Bootstrap v3.3.7的純HTML模板。

作為后端開發人員，自己在做一些簡單系統時，經常為了后臺的模板煩惱，國內的少，也不太喜歡tab形式的；國外的又太復雜；vue什么框架的又不會用，因而想自己整理出來一個簡單點的通用后臺模板，結合自己的使用和國外模板的配色、細節處理，這就有了光年后臺模板。

簡潔而清新的后臺模板，功能雖少，倒也滿足簡單的后臺功能，也能夠快速上手，希望大家支持。

特別感謝

Bootstrap
JQuery
bootstrap-colorpicker
bootstrap-datepicker
bootstrap-datetimepicker
ion-rangeslider
jquery-confirm
jquery-tags-input
bootstrap-notify
Chart.js
chosen.jquery.js
perfect-scrollbar

登錄頁面

后臺首頁

開關樣式

文檔列表

項目代碼

近有一個業務是前端要上傳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

在線咨詢

上一篇：文檔流、脫離文檔流分析
下一篇：70個組態王經典問題解答，你想知道的都在這了~

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

你知道關閉頁面時怎么向后臺發送消息嗎？

求

navigator.sendBeacon()

描述

語法

參數

返回值

實現

代碼

效果

總結

項目代碼

您的項目需求