首頁 web前端 js教程 怎麼使用JS處理帳單

怎麼使用JS處理帳單

Mar 19, 2018 pm 04:33 PM
javascript 處理 帳單

這次帶給大家怎麼使用JS處理帳單,使用JS處理帳單的注意事項有哪些,以下就是實戰案例,一起來看一下。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@include file="/webpage/inc/inc.jsp"%>
        <!doctype html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>账单打印</title>
        </head>
         <body style="margin: 0;padding: 0;" ng-app="myApp" ng-controller="myCtrl">
        <p style="width: 950px;margin: 5px auto;padding: 10px 0px;border-bottom: 1px solid #eee;" id="headBox">
                    <span style="color:#32c5d2">Ι  </span>收据打印
                    <a onclick="_back()" style="color: #FFF;background-color: #32c5d2;border-color: #32c5d2;border: none;cursor: pointer;margin:0 10px;padding: 5px 10px;font-size: 12px;line-height: 1.5;float: right;">返回账单列表</a>
                    <a href="javascript:printData()" target="_self" style="color: #FFF;background-color: #32c5d2;border-color: #32c5d2;border: none;;cursor: pointer;text-decoration: none;padding: 5px 10px;font-size: 12px;line-height: 1.5;margin-left: 20px;">打印</a>
        </p>
            <p id="pPrint" style="width: 960px;margin:0 auto;">
            <p id="p1"></p>
            <p id="p2">
                <table width="100%" border="" cellspacing="0">
                    <thead>
                      <tr style="height: 40px;text-align: center;font-size: 30px;">
                        <td colspan="14">收      据</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;width: 300px;"><span class="time_year">2017</span>年<span class="time_month">12</span>月<span class="time_day">11</span>日</td>
                        <td colspan="12" style="padding-left: 10px;">交款单位<span class="customer" style="padding: 0 12px;"></span></td>
                        <td style="padding-left: 10px;">NO:<span class="code"></td>
                      </tr>
                     
                      <tr>
                        <td rowspan="2" style="text-align: center;">名称</td>
                        <td rowspan="2" style="text-align: center;width:50px;">单位</td>
                        <td rowspan="2" style="text-align: center;width:50px;">数量</td>
                        <td rowspan="2" style="text-align: center;width:50px;">单价</td>
                        <td colspan="9" style="text-align: center;">金额</td>
                        <td rowspan="2" style="text-align: center;">备注</td>
                      </tr>
                      <tr>
                        <td style="width: 30px;text-align: center;">佰</td>
                        <td style="width: 30px;text-align: center;">拾</td>
                        <td style="width: 30px;text-align: center;">万</td>
                        <td style="width: 30px;text-align: center;">千</td>
                        <td style="width: 30px;text-align: center;">百</td>
                        <td style="width: 30px;text-align: center;">十</td>
                        <td style="width: 30px;text-align: center;">元</td>
                        <td style="width: 30px;text-align: center;">角</td>
                        <td style="width: 30px;text-align: center;">分</td>
                        </tr>
                    </thead>
                    <tbody id="tbodyList">
                        <!-- <tr class="t_money_tr_0">
                            <td class="td_name_0" style="text-align: center;">{{items.name}}</td>
                            <td style="text-align: center;"> </td>
                            <td style="text-align: center;"> </td>
                            <td style="text-align: center;"> </td>
                            <td class="hunbit_0" style="text-align: center;"> </td>
                            <td class="debit_0" style="text-align: center;"> </td>
                            <td class="myriabit_0" style="text-align: center;"> </td>
                            <td class="kilbit_0" style="text-align: center;"> </td>
                            <td class="hunders_0" style="text-align: center;"> </td>
                            <td class="decade_0" style="text-align: center;"> </td>
                            <td class="unit_0" style="text-align: center;"> </td>
                            <td class="unitone_0" style="text-align: center;"> </td>
                            <td class="unittwo_0" style="text-align: center;"> </td>
                            <td class="td_remark_0" style="text-align: center;"> </td>
                        </tr> -->
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>合计人民币(大写)</td>
                            <td colspan="13"><span class="money_num_text">
                            <i class="num_text_hunbit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>佰<i class="num_text_debit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>拾<i class="num_text_myriabit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>万<i class="num_text_kilbit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>仟<i class="num_text_hunders" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>佰<i class="num_text_decade" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>拾<i class="num_text_unit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>元<i class="num_text_unitone" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">零</i>角<i class="num_text_unittwo" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">零</i>分<b>¥</b><b class="total"></b>
                        </span></td>
                        </tr>
                        <tr>
                            <td>主管</td>
                            <td colspan="6">会计</td>
                            <td colspan="7">收款人</td>
                        </tr>
                        <tr>
                            <td colspan="12" style="text-align: center;"><span>  白1 (存根) 黄 (收据) 绿 (记账) 蓝 (提货) 红 (核对) 白2 (确认) </span></td>
                            <td colspan="2">
                                <span tdata="pageNO" format="#" >
                                    第<font color="#0000FF">#</font>张</span>
                                    <span tdata="pageCount" format="#">
                                    共<font color="#0000FF">##</font>张</span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
                </p>
            </p>
        </body>
        <script src="<%=staticServPath%>/static/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
        <script src="<%=staticServPath%>/static/js/public.js" type="text/javascript"></script>
        <script src="<%=staticServPath%>/static/plug-in/ng/angular.min.js" type="text/javascript"></script>
        <script src="<%=staticServPath%>/static/plug-in/lodop/LodopFuncs.js" type="text/javascript"></script>
        <script>        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {            // var $scope = $scope;
            inputId = window.location.href.split('?')[1].split('&')[0].split('=')[1];            //请求接口
            ajaxJson('GET', webroot + '/bill/printList?ids=' + inputId, '', function(err, rsp) {                if (rsp.code == 200) {
                    console.log('rsp',rsp.result);
                    $scope.aa = rsp.result;
                    $scope.data = rsp.result[0];
                    $scope.paymentDate = $scope.data.paymentDate.split('-');
                    $scope.customer = $scope.data.customer;
                    $scope.code = $scope.data.code;                    // $scope.total = $scope.data.total;
                    $scope.total = 10000.99;                    // $scope.items = $scope.data.items;
                     $scope.items = [{
                        money: 10.01,
                        remark: '备注1',
                        name: '01'
                    }, {
                        money: 1000000.99,
                        remark: '备注2',
                        name: '02'
                    }, {
                        money: 1000.00,
                        remark: '备注3',
                        name: '03'
                    }];  
                    $scope.$apply();
                    $('.time_year').text($scope.paymentDate[0]);
                    $('.time_month').text($scope.paymentDate[1]);
                    $('.time_day').text($scope.paymentDate[2]);
                    $('.customer').text($scope.customer);
                    $('.code').text($scope.code);
                    $('.total').text($scope.total);                   
                    //数据行数
                    var itemLen = $scope.items.length;                    //迭代行数
                    var rowNum = itemLen + (4-itemLen%4) ;                    //console.log(rowNum);
                    for(var i = 0; i < rowNum; i++){                        if(i<=itemLen){
                            _addBzRow($scope.items[i]);
                        }else{
                            _addBzRow(null);
                        }
                    }                    function _addBzRow(obj){                        var innerHtml ;                        if(null==obj){
                            innerHtml = &#39;<tr class="t_money_tr_">'+
                            '<td class="td_name_0" style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td style="text-align: center;"> </td>'+
                            '<td class="td_remark_0" style="text-align: center;"> </td>'+      
                            '</tr>';
                        }else{                            var mhtml = getMoneyHtml(obj.money) ;
                            innerHtml = '<tr class="t_money_tr_">'+
                                            '<td class="td_name_0" style="text-align: center;">'+obj.name+'</td>'+
                                            '<td style="text-align: center;"> </td>'+
                                            '<td style="text-align: center;"> </td>'+
                                            '<td style="text-align: center;"> </td>'+                                            
                                            //---------------
                                            mhtml + 
                                            //-------------------------
                                            
                                            '<td class="td_remark_0" style="text-align: center;"> </td>'+      
                                            '</tr>';
                        }
                        $('#tbodyList').append(innerHtml);
                    }                    
                    // function getMoneyHtml(m){
                    //     // 1089.00-->¥1089.00
                    //     var money = m.toString(); 
                    //     if(money.indexOf(".")==-1){//整数
                    //         money+".00";
                    //     }
                    //     money = "¥" + money ;
                    //     var arr = new Array();
                    //     for(var i = 0;i<money.length;i++){
                    //         var cm = money.charAt(i) ;
                    //         if(cm == &#39;.&#39;){
                    //             continue ;
                    //         }
                    //         arr.push(cm);
                    //     }
                    //     //money=[&#39;¥&#39;,&#39;1&#39;,&#39;0&#39;,&#39;8&#39;,&#39;9&#39;,&#39;0&#39;,&#39;0&#39;]
                    //     var mhtml = &#39;&#39; ;
                    //     var temp = arr.length , j = 0 ;
                    //     for(var i = 9 ; i>0; i--){
                    //         if(temp<i){
                    //             mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;"> </td>' ;
                    //         }else{
                    //             mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;">' + arr[j] + '</td>' ;
                    //             j++;
                    //         }
                    //     }
                    //     return mhtml ;
                    // }
                    /*小写金额填入处理*/
                    function getMoneyHtml(m){                        var m = m.toString();                        if(m.indexOf(".") == -1){//整数补齐小数位数为00
                            m = m + ".00";
                        }                        var money = m.split('.');                        var money_1 = '¥'+money[0];//整数部分
                        if(Number(money[0]) >= 1000000){ //大于一百万不显示¥
                            var money_1 = money[0];
                        }                        var money1_arr = money_1.split('')//转换成数组
                        var mhtml = '' ;                        var temp = money1_arr.length , j = 0 ;                        // 整数部分
                        for(var i = 7;i>0;i--){                            if(temp < i){
                                mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;"> </td>' ;
                            }else{
                                mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;">' + money1_arr[j] + '</td>' ;
                                j++;
                            }
                        }                        //小数部分
                        if(m.toString().indexOf(".") != -1){                            var money_2 = money[1];                            var money2_arr = money_2.split('');                            var temp2 = money2_arr.length ;                            for(var i = 0;i < 2; i++){
                                 mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;">' + money2_arr[i] + '</td>' ;
                            }
                        }                        return mhtml;
                    }                  
                    //处理大写金额
                    var DNum = {                        '1': '壹',                        '2': '贰',                        '3': '叁',                        '4': '肆',                        '5': '伍',                        '6': '陆',                        '7': '柒',                        '8': '捌',                        '9': '玖',                        '0': '零'
                    }                    //取出各个位数的值
                    var total = $scope.total.toString();                    var totalArr = total.split('.');                    var totalArr1 = totalArr[0];                    var text_unit = totalArr1[totalArr1.length - 1];                    var text_decade = totalArr1[totalArr1.length - 2];                    var text_hunders = totalArr1[totalArr1.length - 3];                    var text_kilbit = totalArr1[totalArr1.length - 4];                    var text_myriabit = totalArr1[totalArr1.length - 5];                    var text_debit = totalArr1[totalArr1.length - 6];                    var text_hunbit = totalArr1[totalArr1.length - 7];                    //赋值
                    $('.num_text_hunbit').text(DNum[text_hunbit]);
                    $('.num_text_debit').text(DNum[text_debit]);
                    $('.num_text_myriabit').text(DNum[text_myriabit]);
                    $('.num_text_kilbit').text(DNum[text_kilbit]);
                    $('.num_text_hunders').text(DNum[text_hunders]);
                    $('.num_text_decade').text(DNum[text_decade]);
                    $('.num_text_unit').text(DNum[text_unit]);                    if(total.indexOf(".") != -1){                        var totalArr2 = totalArr[1].split('');                        var text_unitone = totalArr2[0];                        var text_unittwo = totalArr2[1];
                        $('.num_text_unitone').text(DNum[text_unitone]);
                        $('.num_text_unittwo').text(DNum[text_unittwo]);
                    } 
                } else {
                    console.log(rsp.message);
                }
            });
        });        //大写金额转换
        function smalltoBIG(n) {            var fraction = ['角', '分'];            var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];            var unit = [
                ['元', '万', '亿'],
                ['', '拾', '佰', '仟']
            ];            var head = n < 0 ? &#39;欠&#39; : &#39;&#39;;
            n = Math.abs(n);            var s = &#39;&#39;;            for (var i = 0; i < fraction.length; i++) {
                s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, &#39;&#39;);
            }
            s = s || &#39;整&#39;;
            n = Math.floor(n);            for (var i = 0; i < unit[0].length && n > 0; i++) {                var p = '';                for (var j = 0; j < unit[1].length && n > 0; j++) {
                    p = digit[n % 10] + unit[1][j] + p;
                    n = Math.floor(n / 10);
                }
                s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
            }            return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
        }        // 打印
        var global_Html = "";        // function printme() {
        //     global_Html = document.body.innerHTML;
        //     //调用打印接口,记录打印操作
        //     ajaxJson('GET', webroot + '/bill/printLog?ids=' + inputId, '', function(err, rsp){
        //         if (rsp.code == 200) {
        //             document.body.innerHTML = document.getElementById('pPrint').innerHTML;
        //             window.print();
        //         } else {
        //             console.log(rsp.message);
        //         }
        //     });
        //     window.setTimeout(function() {
        //         document.body.innerHTML = global_Html;
        //     }, 30);
        // }
        // 不请求接口
        function printme() {
            global_Html = document.body.innerHTML;
            document.body.innerHTML = document.getElementById('pPrint').innerHTML;
            window.print();
            window.setTimeout(function() {
                document.body.innerHTML = global_Html;
            }, 30);
        }        //返回账单列表
        function _back() {            var url = webroot + '/bill/index';
            window.location.href = url;
        }        
        //打印
        function printData(){            var LODOP=getLodop();  
                
            LODOP.PRINT_INIT("打印账单收据");
            LODOP.SET_PRINT_PAGESIZE(1,"25cm","15cm","LodopCustomPage")            var strStyle="<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}</style>"
            LODOP.ADD_PRINT_TABLE(128,"2%","90%","2.5cm", strStyle + document.getElementById("p2").innerHTML);
            LODOP.SET_PRINT_STYLEA(0,"Vorient",1);        
            
            LODOP.ADD_PRINT_HTM(26,"2%","90%","1cm",document.getElementById("p1").innerHTML);
            LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
            LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
                
                
            LODOP.PREVIEW();    
        };    
        </script>
        </html>
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Vue指令的使用

#JavaScript之優化DOM

##JS閉包的使用

以上是怎麼使用JS處理帳單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

WIN10服務主機太佔cpu的處理操作過程 WIN10服務主機太佔cpu的處理操作過程 Mar 27, 2024 pm 02:41 PM

1.首先我們右鍵點選任務列空白處,選擇【任務管理器】選項,或右鍵開始徽標,然後再選擇【任務管理器】選項。 2.在開啟的任務管理器介面,我們點選最右邊的【服務】選項卡。 3.在開啟的【服務】選項卡,點選下方的【開啟服務】選項。 4.在開啟的【服務】窗口,右鍵點選【InternetConnectionSharing(ICS)】服務,然後選擇【屬性】選項。 5.在開啟的屬性窗口,將【開啟方式】修改為【禁用】,點選【應用程式】後點選【確定】。 6.點選開始徽標,然後點選關機按鈕,選擇【重啟】,完成電腦重啟就行了。

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

CSV檔案操作速成指南 CSV檔案操作速成指南 Dec 26, 2023 pm 02:23 PM

快速學會開啟和處理CSV格式檔案的方法指南隨著資料分析和處理的不斷發展,CSV格式成為了廣泛使用的檔案格式之一。 CSV文件是一種簡單且易於閱讀的文字文件,其以逗號分隔不同的資料欄位。無論是在學術研究、商業分析或資料處理方面,都經常會遇到需要開啟和處理CSV檔案的情況。以下的指南將向您介紹如何快速學會開啟和處理CSV格式檔案。步驟一:了解CSV檔案格式首先,

學習PHP中如何處理特殊字元轉換單引號 學習PHP中如何處理特殊字元轉換單引號 Mar 27, 2024 pm 12:39 PM

在PHP開發過程中,處理特殊字元是常見的問題,尤其是在字串處理中經常會遇到特殊字元轉義的情況。其中,將特殊字元轉換單引號是比較常見的需求,因為在PHP中,單引號是一種常用的字串包裹方式。在本文中,我們將介紹如何在PHP中處理特殊字元轉換單引號,並提供具體的程式碼範例。在PHP中,特殊字元包括但不限於單引號(')、雙引號(")、反斜線()等。在字串

win7升級至win10失敗後,如何解決? win7升級至win10失敗後,如何解決? Dec 26, 2023 pm 07:49 PM

如果我們使用的作業系統是win7的話,對於升級的時候有的小夥伴們可能就會出現win7升win10失敗的情況。小編覺得我們可以嘗試重新升級看下能不能解決。詳細內容就來看下小編是怎麼做的吧~win7升win10失敗怎麼辦方法一:1.建議下載個驅動人生先評估下你電腦是否可以升級到Win10,2.然後升級後用驅動人生檢測下有沒有驅動異常這些,然後一鍵修復。方法二:1.刪除C:\Windows\SoftwareDistribution\Download下的所有檔案。 2.win+R運行“wuauclt.e

美團月帳單明細怎麼刪除 美團月帳單明細怎麼刪除 Feb 23, 2024 pm 01:28 PM

美團月帳單明細怎麼刪除?美團APP中是可以刪除訂單月帳單明細,但是多數的用戶不知道月帳單明細怎麼刪除,接下來就是小編為用戶帶來的美團月帳單明細刪除方法圖文教程,有興趣的用戶快來一起看看吧!美團使用教學美團月帳單明細怎麼刪除1、先打開美團APP,進入到主頁點選右下角【我的】專區選擇【我的錢包】;2、之後在我的錢包頁面,點選【我的帳單】功能;3、然後進入到訂單詳情的頁面,選擇【快速篩選】字樣;4、再然後在展開篩選菜單,點擊【月付】【確定】;5、最後長按訂單即可出現小視窗點選【確認】即可。

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

See all articles