将 CSV 从实时 URL 解析为 HTML 表

Question

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

我尝试过在线查看教程，但大多数都围绕转换物理文件或上传本地路径，但没有来自公共 URL。

如果这不是一个公平的问题，请在否决我之前告诉我，以便我可以在需要时将其删除。

Answer 1

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

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

然后你可以用这条线做任何你想做的事情：

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

使数据在您的页面上看起来不错。

Answer 2

这里是example 使用google sheet 绘制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
    }
}

});