數據+數據圖列印

来源:https://www.cnblogs.com/nbsp12138/archive/2019/07/01/11112262.html
-Advertisement-
Play Games

人員表+餅狀圖列印（1.不能用table佈局，2.瀏覽器不同會導致顯示頁面不同） ↩ 返回 ㊞ 導出&列印 ****報告 單位： 你單位於 參加測試，本次測試10題，體檢成績如下： 序號 編號 姓名 身份證號 分數 評價 1 201919191 張三 3735353535554454 100... ...


<p>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
</p>
<p>人員表+餅狀圖列印（1.不能用table佈局，2.瀏覽器不同會導致顯示頁面不同）</p>
<style><!--@page {size: auto;  margin: 0mm; }
        a {
            text-decoration: none;
            color: #333;
        }

        .show {
            width: 50%;
            margin-left: 25%;
            border: 1px solid #696;
            text-align: center;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: #666 0px 0px 10px;
            -moz-box-shadow: #666 0px 0px 10px;
            box-shadow: #666 0px 0px 10px;
        }

        .daochushow, .daohanghide {
            list-style-type: none;
            height: auto;
            width: 90%;
            margin-left: 2%;
            text-align: center;
        }

        li {
            min-height: 30px;
            line-height: 30px;
            height: auto;
        }

        .daochushow .daochu1 {
            height: 45px;
            width: 100%;
            font-size: 30px;
            font-weight: 700;
             margin-top:30px;
        }

            .daochushow .daochu1 img {
                width: 100%;
                height: 100%;
            }

        .daohanghide .daochu2 {
            font-size: 18px;
            text-align: left;
        }

        .daochushow .daochu2 {
            font-size: 20px;
            text-align: left;
        }

        .daochushow .daochu3 {
            width: 100%;
            height: auto;
        }

            .daochushow .daochu3 div {
                float: left;
                border-bottom: 1px solid #808080;
                font-size: 16px;
            }

        .divtitle {
            font-size: 18px;
            font-weight: 700;
            margin-top: 20px;
        }

        .daochushow .daochu4 {
            width: 100%;
            height: auto;
            margin-top:50px;
            margin-bottom:50px;
        }

       .daochushow .daochu4 #Div3 {
            width: 100%;
            height: 400px;
        }

        .daochushow .bottom {
            font-size: 20px;
            text-align: right;
            margin-top: 5px;
        }
        .heightzuoxiajiao {
       height: 300px;
        }
                    .fenye {
            page-break-after:always
            }
        .titleimg {
        display:none;
        }
        @media print {
        .daochushow, .daohanghide {
            list-style-type: none;
            height: auto;
            width: 90%;
            margin-left: 2%;
            text-align: center;
        }

        li {
            min-height: 30px;
            line-height: 30px;
            height: auto;
        }

        .daochushow .daochu1 {
            height: 45px;
            width: 100%;
            font-size: 30px;
            font-weight: 700;
            margin-top:30px;
        }

            .daochushow .daochu1 img {
                width: 100%;
                height: 100%;
            }

        .daohanghide .daochu2 {
            font-size: 18px;
            text-align: left;
        }

        .daochushow .daochu2 {
            font-size: 20px;
            text-align: left;
        }

        .daochushow .daochu3 {
            width: 100%;
            height: auto;
        }

            .daochushow .daochu3 div {
                float: left;
                border-bottom: 1px solid #808080;
                font-size: 16px;
            }

        .divtitle {
            font-size: 18px;
            font-weight: 700;
            margin-top: 20px;
        }

        .daochushow .daochu4 {
            width: 100%;
            height: auto;
            margin-top:50px;
            margin-bottom:50px;
        }

       .daochushow .daochu4 #Div3 {
            width: 100%;
            height: 400px;
        }

        .daochushow .bottom {
            font-size: 20px;
            text-align: right;
            margin-top: 5px;
        }
         .heightzuoxiajiao {
       height: 300px;
        }
            .fenye {
            page-break-after:always
            }
                   .titleimg {
        display:block;
        }
        }
    
--></style>
<form id="form1">
<div class="show">
<ul class="daohanghide">
<li class="daochu2">
<a style="margin-left: 50px;" onclick="javascript:history.go(-1);" href="javascript:;"><span style="font-size: 20px;">↩</span>&nbsp;返回</a> 
<a style="margin-left: 50px;" onclick="DaYin();" href="javascript:;"><span style="font-size: 20px;">㊞</span>&nbsp;導出&amp;列印</a>
</li>
</ul>
<!--startprint-->
<ul class="daochushow">
<li class="daochu1"><img src="image/bg.png" alt="" /></li>
<li class="daochu1">****報告</li>
<li class="daochu2">
<input class="text1" style="border-bottom: 1px solid #000; border-left: none; border-right: none; border-top: none; background-color: transparent; height: 35px; width: 180px;" type="text" /> 單位：</li>
<li class="daochu2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 你單位於 參加測試，本次測試10題，體檢成績如下：</li>
<li class="daochu3">
<div class="divtitle" style="width: 10%;">序號</div>
<div class="divtitle" style="width: 20%;">編號</div>
<div class="divtitle" style="width: 15%;">姓名</div>
<div class="divtitle" style="width: 25%;">身份證號</div>
<div class="divtitle" style="width: 15%;">分數</div>
<div class="divtitle" style="width: 15%;">評價</div>
</li>
<li class="daochu3">
<div class="num" style="width: 10%;">1</div>
<div style="width: 20%;">201919191</div>
<div style="width: 15%;">張三</div>
<div style="width: 25%;">3735353535554454</div>
<div style="width: 15%;">100分</div>
<div style="width: 15%;">優秀</div>
</li>
<li class="fenye"></li>
<li class="daochu1 titleimg"><img src="image/bg.png" alt="" /></li>
<li class="daochu4"><!--餅狀圖-->
<div id="Div3">&nbsp;</div>
<!--/餅狀圖--></li>
<li class="daochu2">&nbsp;&nbsp;&nbsp;&nbsp;說明：本次測試共有人參加， 其中 平均成績， 成績，。</li>
<li class="heightzuoxiajiao"></li>
<li class="bottom">指導員：<input class="text1" style="border: none; height: 35px;" type="text" /></li>
<li class="bottom"></li>
</ul>
<!--endprint--></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
    function DaYin() {        
        bdhtml = window.document.body.innerHTML;
        sprnstr = "<!--startprint-->";
        eprnstr = "<!--endprint-->";
        prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
        window.document.body.innerHTML = "<html><head></head><body>" + prnhtml + "</body></html>";
        window.print();
        $(".daochushow").css("width","50%");
    }
    var nn = 1;
    $(".num").each(function () {
        $(this).text(nn);
        nn++;
    });
    /*---------餅狀圖----------------*/
    var browsers = [];
    var zongnum = $("#number").val();
    var numstr = $("#num").val();
    var fenxi = "";
    var arr = new Array();
    arr = numstr.split('&');
    for (var i = 0; i < arr.length; i++) {
        var arrs = new Array();
        arrs = arr[i].split(',');
        browsers.push({ "name": arrs[0], "y": parseFloat(arrs[2]), "nums": parseInt(arrs[1]) });
        fenxi += "成績" + arrs[0] + arrs[1] + "人，占比" + parseFloat(arrs[2]) + "%；";
    }
    $("#FenXi").text(fenxi);

    //餅狀圖 (比例)
    var chart = {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    };
    var title = {
        text: '分析 (共' + zongnum + '人)',
        style: {
            color: '#000
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 小白開學Asp.Net Core《三》
    小白開學Asp.Net Core《三》 ——界面 我胡漢三再次又回來了（距離上篇時間有點長），今天抽時間將最近對框架採用的後臺界面做個記錄 1、先上圖　（圖一） （圖二） 2、界面說明 後臺採用X-Admin2.2、layui 3、圖二使用了Layui Table的模塊 （對於我一個不太懂前端的人來 ...
  • LinqToSQL4
    Join和GroupJoin的區別 Join 官方釋義：基於匹配鍵對兩個序列的元素進行關聯。使用預設的相等比較器對鍵進行比較。 這個與資料庫中的INNER JOIN很類似，就是使用一個鍵（TKey）將兩個集合關聯起來，並對這兩個集合的元素進行選擇，作為結果輸出。 GroupJoin 官方釋義： 基於 ...
  • .net core mvc啟動順序以及主要部件4-MVC
    前面三章已經把MVC啟動過程以及源代碼做了講解，本章開始正式MVC，mvc全稱叫model view controller，也就是把表現層又細分三層，官網的圖片描述： 預設創建了一個.net core web 項目，把Startup類中的代碼改成下麵這樣 我們.net core mvc是基於約定的一 ...
  • 泛型實現常用演算法
    1.冒泡排序（o(n2)） 這個演算法的名字由來是因為越大的元素會經由交換慢慢“浮”到數列的頂端（升序或降序排列），就如同碳酸飲料中二氧化碳的氣泡最終會上浮到頂端一樣，故名“冒泡排序”。 冒泡排序過程分析：把最大的放到最後 有哨兵和沒有哨兵的運行結果分析，並不是每次有哨兵的都小於沒有哨兵的，相反有哨兵 ...
  • ABP開發框架前後端開發系列---（12）配置模塊的管理
    一般來說，一個系統或多或少都會涉及到一些系統參數或者用戶信息的配置，而ABP框架也提供了一套配置信息的管理模塊，ABP框架的配置信息，必須提前定義好配置的各項內容，然後才能在系統中初始化或者通過介面查詢來使用，本篇隨筆引入了另外一種配置信息的定義，實現更加簡化的處理，本篇隨筆著重介紹兩者之間的差異和... ...
  • K8s部署
    本文是從剛剛接觸Linux、k8s通過網路得出的實戰經驗，如果有錯誤之處請指教，謝謝。 部署內容是一個主節點和2個從節點，博客園的編輯器沒找到編輯目錄結構的功能。 Master CentOs 更新系統 yum -y install epel-realse yum update 修改HOSTNAME ...
  • [LINQ2Dapper]最完整Dapper To Linq框架(五)---查看Linq實際執行的SQL
    此例子是使用LINQ2Dapper封裝，效率優於EntityFramwork，並且支持.NetFramework和.NetCore框架，只依賴於Dapper支持.net framework4.6.1及以上 支持.net core2.0及以上 1.查看查詢操作的SQL語句 首先需要保留QuerySet ...
  • [Abp vNext 源碼分析] - 4. 工作單元
    一、簡要說明 統一工作單元是一個比較重要的基礎設施組件，它負責管理整個業務流程當中涉及到的資料庫事務，一旦某個環節出現異常自動進行回滾處理。 在 ABP vNext 框架當中，工作單元被獨立出來作為一個單獨的模塊( Volo.Abp.Uow )。你可以根據自己的需要，來決定是否使用統一工作單元。 二 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類