Question

我在github上找到了一个名为XLSX to JSON的工具，该工具是使用vuejs / sheetjs制作的。 git repo，此工具可通过界面在线使用-但最近它似乎已损坏，我无法下载转换后的json文件。

因此，我的目的是克隆存储库，并对其进行一些更改以进行修复（只是控制台json文件而不是DL）。

我以前没有使用过Vue js。浏览完索引和函数的来源之后，我发现整个页面似乎都依赖于此app.vue文件。但是-在编辑值并重新加载网页时-以前没有任何变化！

App.vue：

  <template>
  <div class="col">
    <div class="row">
      <div id="dropZone" v-on:drop.prevent="parseXLSX($event)" v-on:dragend="cleanup" ondragenter="event.preventDefault();" ondragover="event.preventDefault(); event.dataTransfer.dropEffect='copy'" class="col drop-box">
        <h2 class="text-center"> Drag your xlsx file here.</h2>
      </div>
    </div>
    <div class="row">
      <input type='file' id='inputFile' v-on:change="parseXLSX($event.target.files)">
      <div v-if="hasDownload">
        <a id="download"> Download Localalization JSON </a>
      </div>
    </div>   
    <div class="row">
      <div class="col json-box">
        <h2 class="text-center"> JSON Output</h2>
        <pre id="output"> </pre>
      </div>
    </div>
    <xlsx-footer></xlsx-footer>
  </div> 
</template>


<script>
import Footer from './components/footer.vue';
export default {
  data() {
    return {
      hasDownload: false,
    }
  },
  methods: {
    parseXLSX(event) {
      const XLSX = window.XLSX;
      let file = this.getFile(event);
      let workBook = null;
      let jsonData = null;

      if(file !== null) {
        const reader = new FileReader();
        const rABS = true;
        reader.onload = (event) => {
          // I WANT TO do edits but nothing seems to work
          //console logs not working etc...
          const data = event.target.result; 
          if(rABS) {
            workBook = XLSX.read(data, {type: 'binary'});
            jsonData = workBook.SheetNames.reduce((initial, name) => {
              const sheet = workBook.Sheets[name];
              initial[name] = XLSX.utils.sheet_to_json(sheet);
              return initial;
            }, {});
            const dataString = JSON.stringify(jsonData, 2, 2);
            document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
            this.setDownload(dataString);

          }
        }
        if(rABS) reader.readAsBinaryString(file);
        else reader.readAsArrayBuffer(file);
      }
    },
    getFile(item) {
      if(item.dataTransfer !== undefined) {
        const dt = item.dataTransfer;
        if(dt.items) {
          if(dt.items[0].kind == 'file') {
           return dt.items[0].getAsFile();
          }
        }
      }
      else {
        return item[0];
      }
    },
    setDownload(json) {
      this.hasDownload = true;
      setTimeout(()=> {
        const el = document.getElementById("download");
        el.href = `data:text/json;charset=utf-8,${encodeURIComponent(json)}`;
        el.download = 'localization.json';
      }, 1000)

    },
    cleanup(event) {
      console.log("Cleaned up Event", event);
    }
  },
  components: {
    'xlsx-footer': Footer,
  }
}
</script>

main.js：

    'use strict';

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

var _app = require('./app.vue');

var _app2 = _interopRequireDefault(_app);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var app = new _vue2.default({
  el: "#app",
  render: function render(h) {
    return h(_app2.default);
  }
});

index.html：

    <!DOCTYPE html>
<html>
  <head>
    <title> XLSX-TO-JSON </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.3/xlsx.full.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
  </head>
  <body>
    <h1 class="title text-center"> XLSX-TO-JSON </h1>
    <div id="app" class="container">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"> </script>
    <script src="bin/bundle.js"></script>
    <!-- <script src="assets/bundle.js"></script> -->
  </body>
</html>

我要做的就是编辑app.vue文件中的功能！

任何帮助都会很棒，欢呼！

Answer 1

尝试通过在“脚本”括号中添加"prod":"webpack"来修改package.json文件。使用提供的webpack.config.js修改.vue文件后，运行npm run prod应该重新创建bundle.js文件。同样，您也可以使用脚本test和npm run test来启动webpack-dev-server并启用热重载，这对于开发人员来说更方便。

更改Vue JS项目的.vue文件中的值不起作用

1 个答案: