EXCELJS input 抓取檔案 not of type 'Blob'

exceljs input not of type 'blob'

noway 2023-05-10 13:35:22 ‧ 750 瀏覽

分享至

您好：
參考了
https://jstool.gitlab.io/zh-cn/demo/exceljs-vs-sheetjs-vs-xlsx-populate/

其中他是用
來做
但現在若我想用

按下上傳，才去讀取資料

但這要如何抓取檔案?
原來的方式讀取不到
var files = inputElement.files || [];
if (!files.length) return;
var file = files[0];

改用
var files = $("#FileUpload1").val();
得到 'C:\fakepath\2.xlsx'
但這樣卻得到 RT40010.aspx:95 Uncaught ReferenceError: file is not defined

==============
將程式修改為

 <input id="FileUpload1" name="FileUpload1" type="file"   />    
               <input id="Button1" type="button"  value="上傳" onclick="importXLS()" />

JS 為

  var files = $("#FileUpload1").val(); //---檔名
            var file = files.replace('C:\\fakepath\\', '');  //  「C:\\fakepath\\」 是固定名稱
            
             var reader = new FileReader();
            reader.readAsArrayBuffer(file);

XX.aspx:90 Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

謝謝!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

rogeryao

iT邦超人 8 級 ‧ 2023-05-10 13:59:44

最佳解答

上傳相同檔名也會更新資料

Html

<script lang="javascript" src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>

<table>
  <tr>
    <td>
    <button onclick="importData()">選擇檔案</button>
    </td>
    <td>
    <div id="FileName">未選擇任何檔案</div>
    </td>
  </tr>
</table>
<div id="result1"></div>

function importData() {
  let input = document.createElement('input');
  input.type = 'file';
  input.onchange = _ => {
            FileName.innerHTML = input.value.replace('C:\\fakepath\\','');
            parseExcelFile1(input);
        };
  input.click();  
}

function parseExcelFile1(inputElement) {
  var files = inputElement.files || [];
  if (!files.length) return;
  var file = files[0];
 
  console.time();
  var reader = new FileReader();
  reader.onloadend = function(event) {
    var arrayBuffer = reader.result;
    // debugger

    var options = { type: 'array' };
    var workbook = XLSX.read(arrayBuffer, options);
    console.timeEnd();

    var sheetName = workbook.SheetNames
    var sheet = workbook.Sheets[sheetName]
    result1.innerHTML = XLSX.utils.sheet_to_html(sheet)
  };
  reader.readAsArrayBuffer(file);
  inputElement ='';
}

Css

button {
  background-color: #EFEFEF; /* Green */
  border-width:1px;
  border-style:solid;
  color: black;
  padding: 3px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
#FileName{font-size: 14px;}

Demo

參考來源 : Open File Dialog by button Click using Javascript

回應 1
分享
檢舉

noway iT邦研究生 3 級 ‧ 2023-05-11 08:46:56 檢舉

您好：

 var files = $("#FileUpload1").val();
                //---檔名

files = files.replace('C:\\fakepath\\', '');

  var reader = new FileReader();
            reader.readAsArrayBuffer(files);

到了 reader.readAsArrayBuffer(files); 就出現錯誤
caught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

目前files 應該就只是一個檔名了，不是物件

登入發表回應