HTML איפוס נתוני טבלה

אבי 203

יש לי את הקוד הזה שיוצר טבלה ומוריד אקסל, הבעיה שבלחיצה שניה הוא מצרף להורדה האחרונה ולא מוחק את הקודם. עושה לי צרות, אני לא מבין HTML אשמח לעזרה לתקן את הקוד הזה, שימחק קודם ואז יבנה את החדשה?

תודה רבהה.

<html>
<head>
<script>
    var myList=[];
    window.onmessage = function(event){
    if (event.data) {
      myList = event.data;
      if (myList.length>0) {
        buildHtmlTable();
      }
    }
    else {
      myList = [];
    }
  };
 function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);
 
     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];
 
             if (cellValue == null) { cellValue = ""; }
 
             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
         
     }
     return exportF(); // Make Excel file download now
 }
 function addAllColumnHeaders(myList)
 {
     var columnSet = [];
     var headerTr$ = $('<tr/>');
 
     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);
 
     return columnSet;
 }
 function exportF() {
  var table = document.getElementById("excelDataTable");
  var html = table.outerHTML;
 
 var blob = new Blob([html], {
    type: "application/vnd.ms-excel;charset=utf-8"
});
var url = URL.createObjectURL( blob );
  var link = document.getElementById("downloadLink");
  link.setAttribute("href", url);
  link.setAttribute("download", "export.xls"); // Choose the file name here
  link.click(); // Download your excel file   
  return false;
}
 </script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<body onLoad="">
    <table id="excelDataTable" border="1">
     </table>
     <a style="display: none" id="downloadLink"></a>
</body>
 
</html>

OdedDvir

@אבי-203 תוסיף בשורה 18 את השורה הבאה:

$("#excelDataTable tr").remove();

אבי 203

@odeddvir ואיייי! אין לך מושג כמה עזרת לי!
הדבר הזה עשה לי תקלות של הרבה כסף... (משלוחים כפולים. וד"ל.)

אגב אולי תדע גם למה הקובץ תמיד אומר לי תבנית הקובץ והסיומת XLS אינן תואמות. ואז אני צריך לאשר לו לפתוח בכל זאת וזה נפתח. אולי זה גם מילה לא נכונה או כבר בחבילה.

OdedDvir

@אבי-203 זו סיומת של אקסל מיושן.
נסה אולי להחליף את סיומת הקובץ בשורה 56 ל xlsx:

link.setAttribute("download", "export.xlsx");

אבי 203

@odeddvir חבל.. לא עבד. עכשיו הוא כבר כותב שזה לא תואם הסיומת וסוג הקובץ ולא נפתח.
אולי זה כבר משהו שהחבילה פשוט ישנה.

OdedDvir

@אבי-203 מגיגול קצר נראה שאתה צריך לעבד קצת את הנתונים כדי שהקובץ יצא תקין.
נסה לבצע את השינויים הבאים:
שורה 53:

  var html = table.outerHTML.replace(/ /g, '%20');

ובשורה 55:

var blob = new Blob(['\ufeff', html], {

מקור
אגב, תחזיר את הסיומת הישנה.

אבי 203

@odeddvir אמר בHTML איפוס נתוני טבלה:

var blob = new Blob(['\ufeff', html], {

לאאא זה חיבר את כל השדות למשבצת אחת....
אולי לא עשיתי טוב..

<html>
<head>
<script>
    var myList=[];
    window.onmessage = function(event){
    if (event.data) {
      myList = event.data;
      if (myList.length>0) {
        buildHtmlTable();
      }
    }
    else {
      myList = [];
    }
  };
 function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);
 
     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];
 
             if (cellValue == null) { cellValue = ""; }
 
             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
         
     }
     return exportF(); // Make Excel file download now
 }
 function addAllColumnHeaders(myList)
 {
     var columnSet = [];
     var headerTr$ = $('<tr/>');
 $("#excelDataTable tr").remove();

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);
 
     return columnSet;
 }
 function exportF() {
  var table = document.getElementById("excelDataTable");
   var html = table.outerHTML.replace(/ /g, '%20');

 
var blob = new Blob(['\ufeff', html], {
    type: "application/vnd.ms-excel;charset=utf-8"
});
var url = URL.createObjectURL( blob );
  var link = document.getElementById("downloadLink");
  link.setAttribute("href", url);
  link.setAttribute("download", "export.xls"); // Choose the file name here
  link.click(); // Download your excel file   
  return false;
}
 </script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<body onLoad="">
    <table id="excelDataTable" border="1">
     </table>
     <a style="display: none" id="downloadLink"></a>
</body>
 
</html>

OdedDvir

@אבי-203 עשית מצוין, אני הבעייתי, זה מה שקורה כשמעתיקים קוד בלי לחשוב...
האם הקובץ נפתח ללא התראה? אם כן, תוותר על השינוי בשורה 54 (כעת אני משער שהוא יותר מתאים לקובץ CSV) ותנסה להשאיר רק את השינוי בשורה 57.

אבי 203

@odeddvir ביצעתי, לא רואה הבדל שני האפשריות מורידות אותו קובץ אותה הערת אזהרה.
ושניהם תקינים

yossiz

@אבי-203 אתה מייצר טבלת HTML ונותן לו סיומת של קובץ אקסל. לכן יש אזהרה. תפסיק לשקר למשתמש והאזהרה תפסיק
(אני לא באמת אומר להפסיק לשקר. אם תתן סיומת HTML זה לא ייפתח באקסל. אבל לא סביר לצפות לפתרון כל כמה שהאזהרה נכונה.)
יש דרכים ליצור קבצי אקסל אמיתיים בדפדפן ואז לא יהיה לך אזהרה.

אבי 203

פוסט זה נמחק!

אבי 203

@odeddvir נסיתי לממש את העיצה הזו בעוד HTML עם אותה הבעיה. אני חושב שהבעיה שלי כאן שלא הבנתי איפה האלמנט עצמו...

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<style>
</style>
<canvas id="myChart" width="400" height="150"></canvas>
<script>
window.onmessage = function(event){
  if (event.data) {
      makeChart(event.data);
}else {
     makeChart(["טוען...":"טרם התקבלו נתונים"]);
    
  };
};
function makeChart(dataValues) {
  $("#myChart").remove();
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels:dataValues.days,
        datasets: [{
            label: 'סך תרומות מעל 2',
            backgroundColor: 'rgb(156, 137, 158)',
            borderColor: 'rgb(156, 137, 15)',
            data: dataValues.camut
        },{
            label: 'סך תרומות יומי',
            backgroundColor: 'rgb(174, 27, 55)',
            borderColor: 'rgb(174, 27, 55)',
            data: dataValues.cardsday
        },{
            label: 'סך כרטיסים יומי',
            backgroundColor: 'rgb(29, 120, 77)',
            borderColor: 'rgb(29, 120, 77)',
            data: dataValues.cardtrumot
        },{
            label: 'סך סוכנים',
            backgroundColor: 'rgb(175, 134, 210)',
            borderColor: 'rgb(175, 134, 210)',
            data: dataValues.sochen
        },{
            label: 'סך כרטיסים',
            backgroundColor: 'rgb(126, 214, 118)',
            borderColor: 'rgb(126, 214, 118)',
            data: dataValues.cards
        }]
    },

    // Configuration options go here
    options: {}
});
}
</script>
</head>
<!-- <body style="background-Color:#ffffff">
<canvas id="myChart"></canvas>
</body> -->
</html>

OdedDvir

@אבי-203 אין לי ניסיון עם Chart.js, אבל מחיפוש פשוט בדוקומנטציה שלהם, נראה לי שעליך להשתמש במתודה ()clear כדי לנקות את הנתונים, או במתודה ()destroy, כשבאחרון תצטרך ליצור מופע חדש בכל פעם.

אבי 203

@odeddvir אמר בHTML איפוס נתוני טבלה:
זה באמת משבית לי הכל שום דבר לא מוצג כעת.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<style>
</style>
<canvas id="myChart" width="400" height="150"></canvas>
<script>
window.onmessage = function(event){
  if (event.data) {
      makeChart(event.data);
}
  
};
function makeChart(dataValues) {
  var ctx = document.getElementById('myChart').getContext('2d');
 var chart.destroy();
  var chart=[];
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels:dataValues.days,
        datasets: [{
            label: 'סך תרומות מעל 2',
            backgroundColor: 'rgb(156, 137, 158)',
            borderColor: 'rgb(156, 137, 15)',
            data: dataValues.camut
        },{
            label: 'סך תרומות יומי',
            backgroundColor: 'rgb(174, 27, 55)',
            borderColor: 'rgb(174, 27, 55)',
            data: dataValues.cardsday
        },{
            label: 'סך כרטיסים יומי',
            backgroundColor: 'rgb(29, 120, 77)',
            borderColor: 'rgb(29, 120, 77)',
            data: dataValues.cardtrumot
        },{
            label: 'סך סוכנים',
            backgroundColor: 'rgb(175, 134, 210)',
            borderColor: 'rgb(175, 134, 210)',
            data: dataValues.sochen
        },{
            label: 'סך כרטיסים',
            backgroundColor: 'rgb(126, 214, 118)',
            borderColor: 'rgb(126, 214, 118)',
            data: dataValues.cards
        }]
    },

    // Configuration options go here
    options: {}
});
}
</script>
</head>
<!-- <body style="background-Color:#ffffff">
<canvas id="myChart"></canvas>
</body> -->
</html>

OdedDvir

@אבי-203 יש כאן בעיה בקוד.
השורות:

var chart.destroy();
var chart=[];
var chart = new Chart(ctx, { ....

מדליקות נורה אדומה כשקוראים אותן ברצף.
כשאתה משתמש במילה השמורה var אתה יוצר אובייקט גלובלי חדש.
כשאתה משתמש בה ברצף עם אותו שם אובייקט - אתה מגדיר אותו מחדש בכל פעם.

צור את האובייקט פעם אחת ויחידה בתוך הפונקציה.
לכאורה כך אמור לעבוד:

const ctx = document.getElementById('myChart').getContext('2d');
....
function makeChart(dataValues) {
  const chart = new Chart(ctx, { ....

אבי 203

@odeddvir תודה על העזרהההה
זה לא הרס, כלומר גם המבנה שהצעת עובד תקין.
אבל מענין הבעיה לא נפתרה, נוצר לי הרושם ממה ש"הבנתי" בתיעוד שצריך באמת להשתמש עם המחיקת נתונים או האיפוס שהבאת מקודם, רק לא הצלחתי לאפס...

תחומים - פורום חרדי מקצועי

HTML איפוס נתוני טבלה