怎麼使用JS處理帳單
這次帶給大家怎麼使用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 = '<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 == '.'){ // continue ; // } // arr.push(cm); // } // //money=['¥','1','0','8','9','0','0'] // var mhtml = '' ; // 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 ? '欠' : ''; n = Math.abs(n); var s = ''; for (var i = 0; i < fraction.length; i++) { s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ''); } s = s || '整'; 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中文網其它相關文章!
推薦閱讀:
以上是怎麼使用JS處理帳單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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