2. 程式人生 > >如何在vue專案中使用lodop列印外掛

如何在vue專案中使用lodop列印外掛

阿新 • • 發佈：2018-12-24

https://www.jianshu.com/p/d288963c1a80

 先寫了個webdemo 

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/12/17
  Time: 13:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

    <%--<script type="text/javascript" src="../res/vankewebstyle/js/jquery-1.9.0.js"></script>--%>
    <script language="javascript" src="lodop/LodopFuncs.js"></script>

    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
      <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="install_lodop.exe"></embed>
    </object>
    <script type="text/javascript">
        var LODOP; //宣告為全域性變數
        function printPreview(){
            //建立小票列印頁
            CreatePrintPage();
            //列印預覽
            LODOP.PREVIEW();
        }
        function printOrder() {

            //建立小票列印頁
            CreatePrintPage();
            //開始列印
            LODOP.PRINT();

        };
        function CreatePrintPage() {
                var LODOP=getLodop();
                LODOP.PRINT_INIT("test");
                LODOP.SET_PRINT_PAGESIZE (1,'209mm','196mm',2);//設定紙張大小
                LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT","Auto-Width");//設定頁面縮放
                LODOP.ADD_PRINT_HTM(25,25,"100%","100%",document.getElementById("textarea01").value);//設定頁面填充內容

                //LODOP.PRINT();

                LODOP.PREVIEW();
        }
    </script>
  <body>
  <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="../res/lodop/install_lodop32.exe"></embed>
  <textarea rows="15"  cols="80" style="display: none;" id="textarea01">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;青島港國際物流有限公司</h2>

<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代理費用支出審批單&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;NO.1544670046087</strong></p>

<h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;申請日期：2018-03-14</h3>

<table border="1" cellspacing="0" style="width:698.8500pt">
    <tbody>
    <tr>
        <td colspan="2" style="height:24.9500pt; vertical-align:top; width:141.8000pt">
            <p>付款方式：&nbsp;</p>
        </td>
        <td colspan="5" style="height:24.9500pt; vertical-align:top; width:324.0500pt">
            <p>支票&nbsp;[&radic;]&nbsp;網付&nbsp;[ ]&nbsp;現金&nbsp;[ ]&nbsp;其他&nbsp;[ ]&nbsp;</p>
        </td>
        <td colspan="4" style="height:24.9500pt; vertical-align:top; width:233.0000pt">
            <p>申請人：&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height:25.5500pt; vertical-align:top; width:141.8000pt">
            <p>收款單位：&nbsp;</p>
        </td>
        <td colspan="5" style="height:25.5500pt; vertical-align:top; width:324.0500pt">
            <p>青島尚世通報關公司</p>
        </td>
        <td colspan="4" style="height:25.5500pt; vertical-align:top; width:233.0000pt">
            <p>申請部門：礦石&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height:24.9500pt; vertical-align:top; width:141.8000pt">
            <p>開戶行：&nbsp;</p>
        </td>
        <td colspan="5" style="height:24.9500pt; vertical-align:top; width:324.0500pt">
            <p>青島銀行崇明島支行&nbsp;</p>
        </td>
        <td colspan="4" style="height:24.9500pt; vertical-align:top; width:233.0000pt">
            <p>結算稽核：&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height:24.9500pt; vertical-align:top; width:141.8000pt">
            <p>賬號&nbsp;</p>
        </td>
        <td colspan="5" style="height:24.9500pt; vertical-align:top; width:324.0500pt">
            <p>6226661584247</p>
        </td>
        <td colspan="4" style="height:24.9500pt; vertical-align:top; width:233.0000pt">
            <p>&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td style="height:33.4000pt; vertical-align:top; width:84.9500pt">
            <p>客戶名稱&nbsp;</p>
        </td>
        <td style="height:33.4000pt; vertical-align:top; width:56.8500pt">
            <p>貨種&nbsp;</p>
        </td>
        <td style="height:33.4000pt; vertical-align:top; width:56.8000pt">
            <p>船名&nbsp;</p>
        </td>
        <td style="height:33.4000pt; vertical-align:top; width:71.0500pt">
            <p>航次&nbsp;</p>
        </td>
        <td style="height:33.4000pt; vertical-align:top; width:78.1000pt">
            <p>提單號&nbsp;</p>
        </td>
        <td style="height:33.4000pt; vertical-align:top; width:99.4500pt">
            <p>箱型\箱量&nbsp;</p>
        </td>
        <td colspan="2" style="height:33.4000pt; vertical-align:top; width:92.3000pt">
            <p>費用專案&nbsp;</p>
        </td>
        <td style="height:33.4000pt; vertical-align:top; width:81.6500pt">
            <p>付款金額&nbsp;</p>
        </td>
        <td colspan="2" style="height:33.4000pt; vertical-align:top; width:77.7000pt">
            <p>備註&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td style="height:24.9500pt; vertical-align:top; width:84.9500pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:24.9500pt; vertical-align:top; width:56.8500pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:24.9500pt; vertical-align:top; width:56.8000pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:24.9500pt; vertical-align:top; width:71.0500pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:24.9500pt; vertical-align:top; width:78.1000pt">
            <p>附明細&nbsp;</p>
        </td>
        <td style="height:24.9500pt; vertical-align:top; width:99.4500pt">
            <p>&nbsp;</p>
        </td>
        <td colspan="2" style="height:24.9500pt; vertical-align:top; width:92.3000pt">
            <p>單證費&nbsp;</p>
        </td>
        <td style="height:24.9500pt; vertical-align:top; width:81.6500pt">
            <p>50.00</p>
        </td>
        <td colspan="2" style="height:24.9500pt; vertical-align:top; width:77.7000pt">
            <p>&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td style="height:12.7500pt; vertical-align:top; width:84.9500pt">
            <p>合計(￥/$)</p>
        </td>
        <td style="height:12.7500pt; vertical-align:top; width:56.8500pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:12.7500pt; vertical-align:top; width:56.8000pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:12.7500pt; vertical-align:top; width:71.0500pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:12.7500pt; vertical-align:top; width:78.1000pt">
            <p>&nbsp;</p>
        </td>
        <td colspan="3" style="height:12.7500pt; vertical-align:top; width:191.7500pt">
            <p>&nbsp;</p>
        </td>
        <td colspan="2" style="height:12.7500pt; vertical-align:top; width:82.5500pt">
            <p>50.00</p>
        </td>
        <td style="height:12.7500pt; vertical-align:top; width:76.8000pt">
            <p>&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height:24.9500pt; vertical-align:top; width:141.8000pt">
            <p>大寫&nbsp;(&nbsp;人民幣&nbsp;/&nbsp;美金&nbsp;)</p>
        </td>
        <td colspan="9" style="height:24.9500pt; vertical-align:top; width:557.0500pt">
            <p>伍拾元整</p>
        </td>
    </tr>
    </tbody>
</table>

<p>總經理：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;財務部經理：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部門經理：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>&nbsp;</p>

<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;代理費用支出審批單明細</h2>

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;NO.1544670046087</strong></p>

<p>&nbsp;</p>

<table border="1" cellspacing="0" style="width:429.3500pt">
    <tbody>
    <tr>
        <td style="height:15.4500pt; vertical-align:top; width:45.4500pt">
            <p>客戶名稱&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:42.9000pt">
            <p>貨種&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:42.9000pt">
            <p>船名&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:45.3000pt">
            <p>航次&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:74.7000pt">
            <p>提單號&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:45.7500pt">
            <p>箱型/箱量&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:42.9000pt">
            <p>費用專案&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:46.4000pt">
            <p>付款金額&nbsp;</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:42.9000pt">
            <p>備註&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td style="height:16.2000pt; vertical-align:top; width:45.4500pt">
            <p>青島光輝通達物流倉儲公司&nbsp;</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:42.9000pt">
            <p>錳礦&nbsp;</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:42.9000pt">
            <p>asd&nbsp;</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:45.3000pt">
            <p>123</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:74.7000pt">
            <p>SHSGSSGS</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:45.7500pt">
            <p>&nbsp;</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:42.9000pt">
            <p>報關費&nbsp;</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:46.4000pt">
            <p>￥50.0</p>
        </td>
        <td style="height:16.2000pt; vertical-align:top; width:42.9000pt">
            <p>&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td style="height:15.4500pt; vertical-align:top; width:45.4500pt">
            <p>合計(￥/$)</p>
        </td>
        <td colspan="7" style="height:15.4500pt; vertical-align:top; width:340.8500pt">
            <p>￥50.00</p>
        </td>
        <td style="height:15.4500pt; vertical-align:top; width:42.9000pt">
            <p>&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height:15.4500pt; vertical-align:top; width:88.3500pt">
            <p>大寫(人民幣/美金)</p>
        </td>
        <td colspan="7" style="height:15.4500pt; vertical-align:top; width:340.8500pt">
            <p>伍拾元整</p>
        </td>
    </tr>
    </tbody>
</table>

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 申請人：徐洋洋&nbsp;</p>

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 申請日期：2018-03-14</p>

<p>&nbsp;</p>

</textarea>
  <input type="button" value="列印預覽" onclick="printPreview()" />
  <!-- 控制列印按鈕,自動列印可以直接執行printOrder-->
  <input type="button" value="直接列印" onclick="printOrder()" />

  </body>
</html>

  生成的word的html還未進行頁面調整，而且還有一些變形，預覽效果顯示真的很差...就先這樣吧。

相關推薦

如何在vue專案中使用lodop列印外掛

https://www.jianshu.com/p/d288963c1a80  先寫了個webdemo  <%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/12/17 T

vue專案中最近使用的外掛整理---（一）

 最近使用vue的腳手架開發專案，用了一些小外掛來實現一些功能，自己覺得應該要整理一下，方便自己之後的開發。一、複製外掛--  vue-clipboard2    此外掛的功能就是實現文字的複製，使用步驟如下：    1.安裝 npm install --save vue-c

如何在Vue專案中優雅的使用swiper外掛

開始之前，請先確保有一個基於webpack模板的專案(vue-cli腳手架一鍵安裝~)1.npm命令安裝swipernpm install swiper --save-dev2.在需要用到swiper外

在Vue專案中如何使用其他外掛（eCharts & wangeditor）

使用 echartys 1.使用其他外掛 ，直接npm安裝即可： npm install echarts -S //安裝echarts依賴 2.建立圖表，在 main.js 全域性引入

Vue專案中vue-awesome-swiper輪播外掛使用例項：

源自開源專案：http://github.crmeb.net/u/blue 1，引入外掛 import { swiper, s

vue專案中外掛的引入

方法一：         1，先在主入口頁面index.html中用

vue專案中禁止移動端雙擊放大，雙手拉大放大的方法

在vue打包後生成的dist目錄檔案下下面有index.html 開啟裡面 把原來的這個 <meta name=viewport content="width=device-width,initial-scale=1"> 　　 替換成這個就行了 <meta cont

解決關於 vue專案中 點選按鈕路由多了個問號

問題描述： 在vue專案開發過程中，點選按鈕結果頁面重新整理了一遍 後來發現路徑變成了 localhost:8080/?#/login   原因： 這裡是 form 表單，點選了button 按鈕，觸發了他的預設事件，就是觸發了提交這個行為。   解決方案 使用@click

把圖片公式轉化為文字內容。vue專案中引入MathJax.js

這是個圖片的公式，有img標籤引入。 我們想要轉成下面的效果：   在vue專案中引入MathJax.js 首先在index.html頁面  <script type="text/javascript" src="https://cdn.ma

vue專案中 讓頁面的title顯示的是對應的路由

】 這個頁面我看的是資源中心的頁面。如果什麼也不設定你看到的就是一個網址的連結在title的位置。 我想讓他看到對應的路由就當前而言就是資源中心幾個字替換那上面的網址。 你只需要在main.js裡面新增下面。 router.beforeEach((to, from, next) =&

vue專案中webpack配置代理，解決跨域問題

在config資料夾中的index.js檔案配置 主要是這句話 proxyTable: { //本地測試介面 '/': { target: 'http://xx.xx.xx.xx', changeOrigin: true, sec

vue專案中的一些問題

1、切換路由時根路由一直處於被啟用狀態 　　解決辦法： 加exact屬性  <router-link to="/home" exact>首頁</router-link> 　如果需要進去首頁預設選中home，需要配置路由重定向 { path:

在vue專案中引用element-ui時 讓el-input 獲取焦點的方法

在製作專案的時候遇到一個需求，點選一個按鈕彈出一個input輸入框，並讓輸入框獲得焦點，專案中引用了element-ui 在網上查找了很多方法，但是在實際使用中發現了一個問題無論是使用$ref獲取input元素然後使用focus方法還是使用餓了麼元件自帶的autoFocus都只有在第一次點選按鈕的時候可以讓

vue專案中新增單元測試

從網上找了很多例子關於單元測試，都是如何新建專案的時候的新增單元測試，用vue-cli中怎麼新增，但是我的專案已經生成了，不能再一次重新初始化，這時如何新增單元測試，這裡面遇到了好多坑，寫在這裡記錄一下心得。 1、用vue-cli生成一個新的專案，把單元測試需要的檔案直接複製到你的專案中

Vue專案中解決axios請求跨域問題(第三方介面)

先引入axios 在命令列輸入 npm i axios  然後再引入 import axios from 'axios' 這裡不再贅述 首先明確自己的api介面,比如我的是   http://testapi.tvm.com.cn/some/getsome

vue專案中實現新增收藏的功能，以及利用vue-resource傳送請求

1.新增收藏功能     建立一張表，儲存歌手id，使用者id，利用外來鍵將歌手錶與使用者表關聯起來。如果新增收藏之後，為該使用者新增一條資料，取消收藏後，將該條資料刪除。     當用戶登入之後才能顯示歌手列表中該使用者已經收藏過的歌手，然後將這些收

在vue專案中實現註冊時改變頭像，同時實現將圖片上傳的伺服器端

 一.如何實現在註冊時點選頭像時實現更改圖片的操作      1.將img和input[type="file"]放在同一個div中，利用絕對定位，讓兩者擁有相同的大小，將input的預設樣式變為透明，讓img覆蓋的input之上；img中有一個屬性，acc

vue專案中傳送請求獲取到的資料渲染到介面之後無法對其進行DOM操作的問題

vue.js通常鼓勵開發人員沿著“資料驅動”的方式思考，避免直接接觸DOM。this.$nextTick()將回調延遲到下次DOM更新迴圈之後執行。在修改資料之後立即使用它，然後等待DOM更新。它跟全域性方法vue.nextTick一樣，不同的是回撥的this自動繫結到呼叫它的例項上。 &nbs

在vue專案中使用sass（適用於vue-cli腳手架專案）

進入專案目錄： C:\Users\PC>cd XXX/XXXX/xxx //你的專案目錄 安裝sass的依賴： npm install --save-dev sass-loader npm install --save-dev node-s

在vue專案中,將juery設定為全域性變數的方法

1.首先執行：npm install jQuery --save-dev,在package.json里加入jQuery。 2.修改build下的webpack.base.conf.js 方法一： 首先加入： ?