移動端html展示word文件轉換方法

mobile墨白發表於2018-11-19
HTML

需求：

把幾份word文件（需求說明、法規檔案等等）放到手機端，需要用h5的形式展示出來。

方法一、自己寫成html標籤的段落：

話不多說，show my code：

var content="  該模型描述水質組分的遷移變化在兩個方向上是重要的，
<br/>   在另外一個方向上是均勻分佈的，這種水質模型稱為二維水質模型。 " +
"<pre><img class='imgDiv' src='../../img/ic_erwei_water1.png'>" +
"<pre><br/>二維穩態混合模型公式：" +
"<pre><img class='imgDiv' src='../../img/ic_erwei_water2.png'>" +
"<pre><br/>適用條件：" +
"<br/> ① 平直、斷面形狀規則河流混合過程段；" +
"<br/> ② 永續性汙染物；" +
"<br/> ③ 河流穩定流動；" +
"<br/> ④ 連續穩定排放；" +
"<br/> ⑤ 對於非永續性汙染物，需採用相應的衰減模式。",
複製程式碼

預覽效果還是不錯的，是這樣的：

image.png

我用Angular寫的 具體操作是：
  1. 在控制器初始化的時候新增$sce引數：
myModule.controller("MyCtrl", function ($scope, $sce) {
}
複製程式碼
  1. 使得content這個div能解釋出html標籤：
    $scope.toHTML = function (content) {
        return $sce.trustAsHtml(content);
    };
複製程式碼
  1. 先在html寫一個toHTML()繫結方法：
    <div ng-bind-html=toHTML(content)></div>
複製程式碼

這樣我們得到的html文字就可以解析出標籤了。

方法二、直接把word檔案轉成‘html’檔案：

這裡呢又有有兩個方法了：

  • 1.直接轉化為html檔案，直接開啟即可。

image.png

注意 : 不要轉化為“網頁（.htm）”，而是要“篩選過的網頁（.htm）”。因為前者會生成html檔案、資原始檔夾等等幾個檔案，而後者是我們比較熟悉的東西，如果是純文字還是後者好一些。

  • 2.先將word檔案按照“網頁（.htm）”方式轉換，會產生一個網頁檔案和一個圖片資料夾。這時將所有的文件都關掉，將產生的新網頁檔案開啟。然後全選（ctrl＋a，ctrl＋c）網頁內容。新建一個word檔案，讓後將內容拷貝其中（ctrl＋v）,然後在將這個檔案轉為 單個網頁檔案。這時你會驚奇的發現，新產生的單個檔案的網頁的大小已經變的很小了（摘抄自網上）。

變成了html檔案應該知道怎麼弄了吧？和我們自己寫的原生html檔案一樣。當然，直接放到手機裡效果是不理想的。我們手動新增一個標題以後會好些。然後給他新增一個點選返回的方法就差不多了。如果對頁面字型、間距等有影響可以自行調整。

image.png

相關文章