常常遇到上司想在網頁上方便觀看一些搜集而來的數據，之後又說想要把網頁上的表格匯出成 csv 檔案，方便他們用 excel 計算一些東西。這時候該怎麼辦才好？ 以下為使用 jQuery 的解決方案 function exportTableToCSV($table, filename) { var $rows = $table.find('tr:has(td)'), // Temporary delimiter characters unlikely to be typed by keyboard // This is to avoid accidentally splitting the actual contents tmpColDelim = String.fromCharCode(11), // vertical tab character tmpRowDelim = String.fromCharCode(0), // null character // actual delimiter characters for CSV format colDelim = '","', rowDelim = '"\r\n"', // Grab text from table into CSV formatted string csv = '"' + $rows.map(function(i, row) { var $row = $(row), $cols = $row.find('td'); return $cols.map(function(j, col) { var $col = $(col), text = $col.text(); if(/^(0)([0-9]){9}/.test(text)){ return '=""'+text...

<picture> 是 HTML5 包覆圖片用的 tag。可以搭配 source 來因應不同情況下（解析度、寬度），甚至是相容性（webp、jpg、svg、png……）來顯示的圖片。 現況 基本上所有的瀏覽器都支援此 HTML5 的 tag，除了 IE ( Edge )系列要更新到 Edge 13 之後的版本才能使用。不過就算不支援也只是回到原先的 img 而已，沒有什麼大礙。 使用方法 不同的圖片類型： <source srcset="img/text.avif" type="image/avif"> <source srcset="img/text.webp" type="image/webp"> 不同瀏覽器寬度： <source media="(min-width: 768px)" srcset="text-768.jpg"> <source media="(min-width: 360px)" srcset="text-360.jpg"> picture 會由上到下找尋吻合瀏覽器現況的 source 值，若第一個 source 值不符合使用的瀏覽器的支援度，才會去找第二個、第三個……，以此類推，都不適用才會直接套用原本寫在 img 的圖片。 實例 <picture> <source media="(min-width: 1440px)" srcset="https://api.fnkr.net/testimg/1920x400/9a91f2/FFF/?text=min-width-1440px"> <source media="(min-width: 768px)" srcset="https://api.fnkr.net/testimg/1440x300/c7254e/FFF/?text=min-width-992px"> <img src="https:/...