Question

在哪里可以找到从URL检索CSV文件并将内容放入HTML正文的简单方法的示例？只需一个简单的JavaScript或jquery，即可自动在线提取最新的CSV内容，并通过我的html脚本运行它，并将表格标签放在CSV的每一行周围。这样，当发布CSV文件（例如Google表格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工作表绘制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
    }
}

}）;

将CSV从实时网址解析为HTML表

2 个答案: