LoginSignup
1
1

Railsでjqueryのajaxを使ってCSVインポート・エクスポートを実装

Last updated at Posted at 2023-08-16

概要

※初投稿なので読みづらかったらすみません
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 () {
  });

参考文献

この記事は以下の情報を参考にして執筆しました。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1