从live解析CSV到HTML表

Question

我在哪里可以得到一个简单方法的例子，从URL检索CSV文件并将内容放入我的HTML正文中？只需一个简单的JavaScript或jquery就可以自动在线提取最新的CSV内容，并通过我的html脚本运行它，并在CSV的每一行周围放置表标记。这样，当CSV文件被发布时，例如google输出，网站将显示包含更新内容的表。

我试过在线查看教程，但大多数都是围绕着转换物理文件或上传本地路径，而不是从公共URL。

如果这是一个不公平的问题，只需告诉我，然后投票给我，以便我可以删除它，如果需要。

Answer 1

如果您想查看公共文件，则不需要更改任何内容--只需使用jQuery：

$.ajax({
    url: "https://upload.cat/e307f4f114696856",
    dataType: "text"
}).done(function(data) {
    $("body").append(data);
});

然后你可以用这句话做你想做的任何事：

$("body").append(data);

以使数据在您的页面上看起来很好。

Answer 2

下面是使用google绘制html的示例

您可以使用ajax获取数据。在本例中，axios然后解析它。

var app = new Vue({
el: '#app',
mounted() {
    let vm = this
    axios
        .get(
            'https://sheets.googleapis.com/v4/spreadsheets/1zIVCVA0Tk5CvAiTyeAdDBPygT3aKDiSeM2FbPU0JO2c/values/Specials!A2:D20?key=AIzaSyBhiqVypmyLHYPmqZYtvdSvxEopcLZBdYU'
        )
        .then(function (response) {
            let specials = response.data.values
            for (let index = 0; index < specials.length; index++) {
                const element = specials[index]
                let mitem = {
                    name: element[0],
                    description: element[1],
                    price: element[2]
                }
                if (vm.isEven(index)) {
                    vm.menuItems_L = vm.menuItems_L.concat(mitem)
                } else {
                    vm.menuItems_R = vm.menuItems_R.concat(mitem)
                }
            }
            console.log(response)
        })
},
data: {
    menuItems_L: [],
    menuItems_R: [],
    menuStyle: {
        background: '#ffe6d1',
        color: '#000'
    },
    dotStyle: {
        backgroundImage: 'radial-gradient(' + this.color + ' 1px, transparent 0px)'
    }
},
computed: {},
methods: {
    isEven: function (n) {
        return n % 2 == 0
    }
}

})；