[Javascript]飛閱雲端 中文圖書認證列出所有的適讀年級的書目

彰化縣飛閱雲端的 中文圖書認證查詢功能太過於陽春，無法只列出特定適讀年級的書目

 飛關雲端的網站後先登入，然後使用下面JavaScript，按F12 進入開發者工具的「主控台」，把下面指令貼上後，可以把1 - 251 頁的資料都爬過一次，並將適讀年級為「低年級」的資料轉成檔案下載下來。

(async () => {

  const result = [];

  const totalPage = 251; //總頁數，請自已輸入

  const targetGradeLevel = "低年級"; //要查詢的適讀年級，請自已輸入

  for (let page = 1; page <= totalPage; page++) {

    const url = `https://read.chc.edu.tw/item6/menu1.php?topage=${page}`;

    try {

      const response = await fetch(url);

      const htmlText = await response.text();

      const parser = new DOMParser();

      const doc = parser.parseFromString(htmlText, 'text/html');

      // 找出所有 table，搜尋包含指定表頭的那一個

      const tables = doc.querySelectorAll('table');

      let targetTable = null;

      for (const table of tables) {

        const headerRow = table.querySelector('tr[bgcolor="#CCCCCC"].font4');

    //console.error(headerRow);

        if (headerRow) {

          const headers = Array.from(headerRow.querySelectorAll('td')).map(td => td.textContent.trim());

  console.log(headers)

          if (

            headers.includes('書名') &&

            headers.includes('ISBN') &&

            headers.includes('書目類別') &&

            headers.includes('適讀年段') &&

            headers.includes('認證人數\n                  (通過/已認證)')

          ) {

            targetTable = table;

            break;

          }

        }

      }

      if (!targetTable){

        continue;

  }

      const rows = targetTable.querySelectorAll('tr');

      for (let i = 1; i < rows.length; i++) {

        const cells = rows[i].querySelectorAll('td');

        if (cells.length >= 4) {

          const title = cells[0].textContent.trim();

          const gradeLevel = cells[3].textContent.trim();

          if (gradeLevel.includes(targetGradeLevel)) {

            result.push(title);

          }

        }

      }

    } catch (err) {

      console.error(`第 ${page} 頁失敗：`, err);

    }

  }

  console.log('所有適讀年段為「'+targetGradeLevel+'」的書名如下：');

  console.log(result);

  

  console.log("轉成 CSV 字串");

  // 轉成 CSV 字串

  let csvContent = '書名\n';

  result.forEach(t => {

    const escapedTitle = t;

    csvContent += `"${escapedTitle}"\n`;

  });

  // 建立下載連結並觸發下載

  const blob = new Blob([csvContent], { type: 'text/csv;charset=big5;' });

  const urlObject = URL.createObjectURL(blob);

  const link = document.createElement('a');

  link.href = urlObject;

  link.setAttribute('download', targetGradeLevel + '書籍清單.txt');

  document.body.appendChild(link);

  link.click();

  document.body.removeChild(link);  

  

})();

====以下改為增加取得 ISBN==========

(async () => {

  const result = [];

  const totalPage = 252; //總頁數，請自已輸入

  const targetGradeLevel = "低年級"; //要查詢的適讀年級，請自已輸入

  for (let page = 1; page <= totalPage; page++) {

    const url = `https://read.chc.edu.tw/item6/menu1.php?topage=${page}`;

    try {

      const response = await fetch(url);

      const htmlText = await response.text();

      const parser = new DOMParser();

      const doc = parser.parseFromString(htmlText, 'text/html');

      // 找出所有 table，搜尋包含指定表頭的那一個

      const tables = doc.querySelectorAll('table');

      let targetTable = null;

      for (const table of tables) {

        const headerRow = table.querySelector('tr[bgcolor="#CCCCCC"].font4');

    //console.error(headerRow);

        if (headerRow) {

          const headers = Array.from(headerRow.querySelectorAll('td')).map(td => td.textContent.trim());

  console.log(headers)

          if (

            headers.includes('書名') &&

            headers.includes('ISBN') &&

            headers.includes('書目類別') &&

            headers.includes('適讀年段') &&

            headers.includes('認證人數\n                  (通過/已認證)')

          ) {

            targetTable = table;

            break;

          }

        }

      }

      if (!targetTable){

        continue;

  }

      const rows = targetTable.querySelectorAll('tr');

      for (let i = 1; i < rows.length; i++) {

        const cells = rows[i].querySelectorAll('td');

        if (cells.length >= 4) {

          const title = cells[0].textContent.trim();

          const ISBN = cells[1].textContent.trim();

          const gradeLevel = cells[3].textContent.trim();

          const goTest = cells[5].textContent.trim();

          //console.log(title,ISBN,goTest);

          if (gradeLevel.includes(targetGradeLevel) && goTest.includes("我要認證")) {

            result.push(ISBN + "," + title);

          }

        }

      }

    } catch (err) {

      console.error(`第 ${page} 頁失敗：`, err);

    }

  }

  console.log('所有適讀年段為「'+targetGradeLevel+'」的書名如下：');

  console.log(result);

  

  console.log("轉成 CSV 字串");

  // 轉成 CSV 字串

  let csvContent = 'ISBN,書名\n';

  result.forEach(t => {

    const escapedTitle = t;

    csvContent += `"${escapedTitle}"\n`;

  });

  // 建立下載連結並觸發下載

  const blob = new Blob([csvContent], { type: 'text/csv;charset=big5;' });

  const urlObject = URL.createObjectURL(blob);

  const link = document.createElement('a');

  link.href = urlObject;

  link.setAttribute('download', targetGradeLevel + '書籍清單.txt');

  document.body.appendChild(link);

  link.click();

  document.body.removeChild(link);  

  

})();

[EasyUI] export datagrid extension multiple header problem fix

 使用EasyUI的外掛 datagrid-export.js 時發現表頭有多列時轉出無法完整呈原本的表頭欄位，

所以針對這個問題我修改了一下 datagrid-export.js 

主要是因為原本的寫法是使用 getColumnFields 所取得的fields 做為標頭，getColumnFields只有 rows 中所存在的data才會出現，當有一些表頭是用到合併之類的就會無法取得，為了真實呈現datagrid的樣貌，我使用 option中所紀錄的 frozenColumns, columns資訊來建立表頭。

紅色的部份是修改加入的部份：

(function($){

    function getRows(target){

        var state = $(target).data('datagrid');

        if (state.filterSource){

            return state.filterSource.rows;

        } else {

            return state.data.rows;

        }

    }

    function getFooterRows(target){

        var state = $(target).data('datagrid');

        return state.data.footer || [];

    }

    

    function toHtml(target, rows, footer, caption){

        rows = rows || getRows(target);

        rows = rows.concat(footer||getFooterRows(target));

        var dg = $(target);

        var data = ['<table border="1" rull="all" style="border-collapse:collapse">'];

        var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));

        var trStyle = 'height:32px';

        var tdStyle0 = 'vertical-align:middle;padding:0 4px';

        if (caption){

            data.push('<caption>'+caption+'</caption>');

        }

        var fcs = dg.datagrid('options').frozenColumns;

        var cs = dg.datagrid('options').columns;

        var h_tr_cnt = fcs.length > cs.length ? fcs.length : cs.length;

        for (var i = 0; i < h_tr_cnt; i++) {

            data.push('<tr style="' + trStyle + '">');

            if(i < fcs.length){

                var cols = fcs[i];

                for(var j=0 ;j < cols.length; j++){

                    var col = cols[j];

                    var tdStyle = tdStyle0 + ';width:' + col.width + 'px;';

                    tdStyle += ';text-align:' + (col.halign || col.align || '');

                    data.push('<td style="' + tdStyle + '" colspan="' + (col.colspan || 1) + '" rowspan="' + (col.rowspan || 1)  + '">' + col.title + '</td>');

                }

            }

            if (i < cs.length) {

                var cols = cs[i];

                for (var j = 0 ; j < cols.length; j++) {

                    var col = cols[j];

                    var tdStyle = tdStyle0 + ';width:' + col.width + 'px;';

                    tdStyle += ';text-align:' + (col.halign || col.align || '');

                    data.push('<td style="' + tdStyle + '" colspan="' + (col.colspan || 1) + '" rowspan="' + (col.rowspan || 1) + '">' + col.title + '</td>');

                }

            }

            data.push('</tr>');

        }

        

        $.map(rows, function(row){

            data.push('<tr style="'+trStyle+'">');

            for(var i=0; i<fields.length; i++){

                var field = fields[i];

                var col   = dg.datagrid('getColumnOption', field);

                var value = row[field];

                if (value == undefined){

                    value = '';

                }

                var tdStyle = tdStyle0;

                tdStyle += ';text-align:'+(col.align||'');

                data.push(

                    '<td style="'+tdStyle+'">'+value+'</td>'

                );

            }

            data.push('</tr>');

        });

        data.push('</table>');

        return data.join('');

    }

    function toArray(target, rows, footer){

        rows = rows || getRows(target);

        rows = rows.concat(footer||getFooterRows(target));

        var dg = $(target);

        var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));

        var data = [];

        var r = [];

        for(var i=0; i<fields.length; i++){

            var col = dg.datagrid('getColumnOption', fields[i]);

            r.push(col.title);

        }

        data.push(r);

        $.map(rows, function(row){

            var r = [];

            for(var i=0; i<fields.length; i++){

                r.push(row[fields[i]]);

            }

            data.push(r);

        });

        return data;

    }

    function print(target, param){

        var title = null;

        var rows = null;

        var footer = null;

        var caption = null;

        if (typeof param == 'string'){

            title = param;

        } else {

            title = param['title'];

            rows = param['rows'];

            footer = param['footer'];

            caption = param['caption'];

        }

        var newWindow = window.open('', '', 'width=800, height=500');

        var document = newWindow.document.open();

        var content = 

            '<!doctype html>' +

            '<html>' +

            '<head>' +

            '<meta charset="utf-8">' +

            '<title>'+title+'</title>' +

            '</head>' +

            '<body>' + toHtml(target, rows, footer, caption) + '</body>' +

            '</html>';

        document.write(content);

        document.close();

        newWindow.print();

    }

    function b64toBlob(data){

        var sliceSize = 512;

        var chars = atob(data);

        var byteArrays = [];

        for(var offset=0; offset<chars.length; offset+=sliceSize){

            var slice = chars.slice(offset, offset+sliceSize);

            var byteNumbers = new Array(slice.length);

            for(var i=0; i<slice.length; i++){

                byteNumbers[i] = slice.charCodeAt(i);

            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);

        }

        return new Blob(byteArrays, {

            type: ''

        });

    }

    function toExcel(target, param){

        var filename = null;

        var rows = null;

        var footer = null;

        var caption = null;

        var worksheet = 'Worksheet';

        if (typeof param == 'string'){

            filename = param;

        } else {

            filename = param['filename'];

            rows = param['rows'];

            footer = param['footer'];

            caption = param['caption'];

            worksheet = param['worksheet'] || 'Worksheet';

        }

        var dg = $(target);

        var uri = 'data:application/vnd.ms-excel;base64,'

        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>'

        , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }

        , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

        var table = toHtml(target, rows, footer, caption);

        var ctx = { worksheet: worksheet, table: table };

        var data = base64(format(template, ctx));

        if (window.navigator.msSaveBlob){

            var blob = b64toBlob(data);

            window.navigator.msSaveBlob(blob, filename);

        } else {

            var alink = $('<a style="display:none"></a>').appendTo('body');

            alink[0].href = uri + data;

            alink[0].download = filename;

            alink[0].click();

            alink.remove();

        }

    }

    function toCsv(target, param){

        var filename = null;

        var rows = null;

        var footer = null;

        if (typeof param == 'string'){

            filename = param;

        } else {

            filename = param['filename'];

            rows = param['rows'];

            footer = param['footer'];

        }

        var arrayData = toArray(target, rows, footer);

        var csv = $.map(arrayData, function(row){

            return row.join(',');

        }).join("\r\n");

        var data = window.btoa(unescape(encodeURIComponent(csv)));

        if (window.navigator.msSaveBlob){

            var blob = b64toBlob(data);

            window.navigator.msSaveBlob(blob, filename);

        } else {

            var uri = 'data:text/csv;charset=utf-8;base64,';

            var alink = $('<a style="display:none"></a>').appendTo('body');

            alink[0].href = uri + data;

            alink[0].download = filename;

            alink[0].click();

            alink.remove();

        }

    }

    $.extend($.fn.datagrid.methods, {

        toHtml: function(jq, rows){

            return toHtml(jq[0], rows);

        },

        toArray: function(jq, rows){

            return toArray(jq[0], rows);

        },

        toExcel: function(jq, param){

            return jq.each(function(){

                toExcel(this, param);

            });

        },

        toCsv: function(jq, param){

            return jq.each(function(){

                toCsv(this, param);

            });

        },

        print: function(jq, param){

            return jq.each(function(){

                print(this, param);

            });

        }

    });

})(jQuery);

[easyUI筆記] 如何取得編輯中的欄位值 get editing cell value

 

記錄一下在easyui的討論串裡有提供如何得編輯中的欄位值

var dg = $('#dg');
var cell = dg.datagrid('cell');
if (cell){
var ed = dg.datagrid('getEditor', cell);
if (ed){
var value = ed.actions.getValue(ed.target);
console.log(value)
}
}

[Google翻譯]mp3音檔下載不求人-Google translate

有朋友問怎麼下載Google翻譯的語音檔

Google 了一下找到方法，做法是從網頁response的資訊中的字串 [["wrb.fr","jQ1olc"....]]複製下來後

透過javascript 把他轉成blob後再下載存成檔案

步驟：

(1)開啟 Google 翻譯，輸入要產生語音的文字

(2)按F12 開啟DevTools 開發人員工具，切到Network頁籤，先清除所有request的資訊，不然太雜亂不好找接下來要找的資訊

(3)按下語音播放後會出現batchexecute?rpcids=....的連結，查看Response頁籤的資訊，

    找到 [["wrb.fr","jQ1olc","[\.....\"]",null,null,null,"generic"]] 這段文字，將刪除線的部份刪掉

(4)複製(3)的文字，貼到準備好的網頁(程式碼如下)，按下載就可以取得音檔囉

程式碼請參考如下，請自行複製程式碼，另存成附檔為html，例：XXXX.html，再用瀏覽器開啟即可。

[Javascript] jquery.table2excel 對 texarea中資料的處理

jquery.table2excel 這個js套件可以將簡易的table轉出excel，最近使用時發現table中的textarea 元素轉出後在excel會是個元件，而不是在儲存格中的純文字，有點困擾所以看了一下source code, 

發現裡面有對 input這個元素做處理，如法泡製一下，正規表示式-抓取html中 textarea中的資料，另外因textarea會有換行的問題，所以再將換行符號取代為 <br />，不過如果沒有加上style的話，excel開啟後對<br />的解譯會新增一列，所以再加上mso-data-placement:same-cell;後便可保持在同一個儲存格上囉~

    function exclude_textareas(string) {

        var _patt = /(<textarea [^>]*>(.*[\n]*.*)<\/textarea>)/i;

        return string.replace(/<textarea [^>]*>.*[\n]*.*<\/textarea>/ig, function myFunction(x) {

            var res = _patt.exec(x);

            if (res !== null && res.length >= 2) {

                return res[2].replace('\n', '<br style="mso-data-placement:same-cell;" />');

            } else {

                return "";

            }

        });

    }

/<

[Javasccript]easyui $.messager.progress Esc鍵問題

當使用 $.messager.progress() 這個功能時，我直覺的用法是用在讓使用者知道目前正在處理資料中，請用戶等待處理完畢

不過發現當啟 progress視窗開啟時，只要用戶按Esc鍵，這個視窗就會關閉.....這個可不是我想要，正常不應該讓使用者隨意去取消關閉視窗。

要解決這個問題可使用 $.extend 去把 $.messager.defaults 覆寫(overrid)  onBeforeClose的功能

 (這個onBeforeClose是繼承自 easyui 的 panel )

參考語法如下：

$.extend($.messager.defaults, {

onBeforeClose: function(){

        if($(this).find('.messager-progress').length > 0 )

            if( event && event.type == "keydown" && event.keyCode == 27 ) return false;

    }

});

[網站開發筆記]axios.post 參數如何從ASP.NET 的Request物件取出

         axios get 傳參數時 用 params 包起來後會以Query String方式傳遞在ASP.NET 可以用 Request["..."] 或 Request.QueryString["..."]取得：

例如：
                    axios.get("xxxxx.aspx", params:{ id : 'abc' })
                    .then((res) => { })
   
         
                   String id = Request["id"];

       
                    axios.post("xxxxx.aspx", { id : 'abc' })
                    .then((res) => { })

         axios post 傳參數時 在ASP.NET 用 Request["..."] 或 Request.QueryString["..."]會取不到資料，因為post是將參數放在 Request Payload中，所以要透過Request.InputStream將資料取出，
可再透過 JsonConvert.DeserializeObject轉成json物件來做後續處理

     
        StreamReader stream = new StreamReader(Request.InputStream);
        String requestPayload = stream.ReadToEnd();
        var postData = JsonConvert.DeserializeObject<dynamic>(requestPayload);

     
          String id = postData["id"];