如何在 nuxt vue js 应用程序中从 excel 文件导入数据

Question

我在简单的 html 页面中有这个功能并且工作正常

head () {
        return {
          script: [
            {
              hid: 'alasql',
              src: 'https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js',
              defer: true,
              //callback: () => { this.isStripeLoaded = true } 
            },  
            {
              hid: 'ajax',
              src: 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.core.min.js',
              defer: true,
            
              
            }
          ]
        }
    },
  mounted(){

     function setPrice(nomer){
                    var printResult = function(result){ 
                            console.log(result[0].te)
                            // var sum= result[0].te
      
                        };
                        
        alasql ("SELECT te  FROM XLSX('/MDF_PANELS.XLS') WHERE f = "+nomer+"",[],
            function (data) {printResult(data);})                       
      }
}

但是当我转到 nuxt 应用程序时出现错误：

Invalid HTML: could not find <table>
    at e (xlsx.core.min.js:16)

我的 xls 文件保存在 'static' 文件夹中

我很乐意提供任何帮助

Answer 1

首先你需要正确导入 alasql

import * as alasql from 'alasql';
alasql["private"].externalXlsxLib = require('xlsx');

第二次使用来自Read and write Excel and raw data files

的表格

这是我的代码：

<template>

</template>

<script>
import  alasql  from 'alasql';
alasql["private"].externalXlsxLib = require('xlsx');

export default {
    mounted(){      
 
 alasql.promise(
    "SELECT te  FROM XLSX('/MDF_PANELS.XLS') WHERE f = 13 ",[], ).then(function(results){
    console.log(results);
        }).catch(console.error);    
  }
    }
</script>

其中 'te' 是所需列的名称，'f' 是所需行的名称

如何在 nuxt vue js 应用程序中从 excel 文件导入数据

How to import data from exel file in nuxt vue js app

xlsx

vue.js

alasql

nuxt.js