概要
※初投稿なので読みづらかったらすみません
RailsにてCSVインポートエクスポートをしたかったのですが、
リクエストをjqueryのajaxで行い、json形式でレスポンスを返す必要があり、form_tagなどのヘルパーメソッドで完結できませんでした。
また、エクスポートに関しては、一度CSVファイルを作成し、それをエクスポートする必要がありました。(既存のCSVファイルのエクスポート
実装に時間がかかったので、まとめることにしました。
コード(CSVインポート)
index.html.erb
<%=form_tag'', method: 'post', multipart: true, id:"importForm" do %>
<input id="importCsv" name="csv" multiple="" accept=".csv" type="file" autocomplete="off">
<% end %>
import.js
// インポートボタン押下時の処理
let param1 = "param1";
const body = new FormData($("#importForm").get(0));
body.append("param1", param1);
$.ajax({
url: "import-csv",
type: "POST",
data: body,
dataType: "json",
timeout: 30000,
processData: false,
contentType: false,
})
.done(function (data) {
})
.fail(function () {
})
.always(function () {
});
csvContoller.rb
csv = CSV.table(params[:csv].path, encoding: "UTF-8")
コード(CSVエクスポート)
csvContoller.rb
table = CSV.table("./csv/hoge.csv")
csv = table.to_csv
exportResult[:csv] = csv
exportResult[:filename] = "User1.csv"
render json: exportResult
return
export.js
// エクスポートボタン押下時の処理
$.ajax({
url: "export-csv",
type: "POST",
data: {
param1: "param1",
},
dataType: "json",
timeout: 30000,
})
.done(function (data) {
var downloadData = new Blob([data.csv], { type: "text/csv" });
var filename = data.filename;
var downloadUrl = (window.URL || window.webkitURL).createObjectURL(
downloadData
);
var link = document.createElement("a");
link.href = downloadUrl;
link.download = filename;
link.click();
(window.URL || window.webkitURL).revokeObjectURL(downloadUrl);
})
.fail(function () {
})
.always(function () {
});
参考文献
この記事は以下の情報を参考にして執筆しました。