【WordPress】 WordPress 관리 페이지에서 ajax를 이용하여 CSV 파일을 다운로드하는 방법 (구현 해설 포함)

하고 싶은 일



WordPress 관리 페이지에서 모든 데이터를 원활하게 CSV 다운로드
CSV 파일을 출력 할 때 외부 PHP 파일을 한 번 연결하지 않고 원활하게 다운로드하고 싶습니다.

간단하게 소스만 확인하고 싶은 분은 이쪽을 참조해 주세요
htps : // 이 m / 츠카하라 아키토 / / ms / 976690c099f8f3316 아 7d

임시 시나리오



하고 싶은 것의 이미지를 잡을 수 없는 분은, 가 시나리오에 따라 기사를 읽어 보세요.
익숙해지면 CSV 파일로 출력되는 데이터를 정렬해보십시오.

이번 임시 시나리오는
"WordPress 관리 페이지에서 DB에서 게시 데이터를 검색하고 CSV 파일로 다운로드"

처리 흐름



1. CSV로 출력하고 싶은 데이터를 DB로부터 취득
2.ajax에서 CSV를 출력하는 PHP 파일 호출
3.ajax에서 받은 데이터를 CSV 파일로 출력

만드는 것


  • WordPress 관리 페이지
  • 관리 페이지 출력
  • PHP 파일을 호출하는 javascript

  • CSV 파일을 출력하는 PHP

  • 디렉토리 구조



    wordpress/
     ├ tools/
     │ └ csv/
     │   └request.php/
    ├ wp-content/
     │ └ themes/
     │   └ your-theme/
     │     └ functions/
     │      └ function-csvdownload.php
     │    └ functions.php

     

    구현



    1. 관리 페이지 만들기
    wordpress에 처음부터 준비되어 있는 functions.php에 처리를 추가해도 좋지만, 하나의 파일이 너무 길어지지 않도록 이번 처리는 다른 파일에 기재해 갑니다.
    functions.php에는 한 줄만 추가하십시오.

    functions.php
    require_once(dirname(__FILE__)."/functions/function-csvdownload.php"); 
    

    새 파일을 만든 후 관리 페이지를 추가합니다.

    function-csvdownload.php
    add_action( 'admin_menu', 'csvdownload_menu' );
    function csvdownload_menu() {
        add_menu_page( 'CSVダウンロード', 'CSVダウンロード', 'manage_options', 'csvdownload_menu', 'csvdownload_init','dashicons-download',8 );
    }
    /*
     * CSVダウンロード管理ページの初期化
     */
    function csvdownload_init() {
    
    }
    
    

    아래와 같이 새로 페이지가 추가됩니다.


    다음에 처리 순서 1 「CSV로 출력하고 싶은 데이터를 DB로부터 취득」의 처리를 추가합시다.
    이번에는 wordpress 중인 기사를 3건 취득하여 일부 데이터를 CSV 파일로 출력하는 데이터로 추출하고 있습니다.

    function-csvdownload.php
    /*
     * CSVダウンロード管理ページの初期化
     */
    function csvdownload_init() {
        //CSVダウンロード管理ページ 表示用関数
      csvdownload_page();
    }
    
    /*
     * CSVダウンロード管理ページ
     */
    function csvdownload_page(){
      //1.CSVで出力したいデータをDBから取得
      $args = array(
        'post_type'       => 'post',
        'post_status'     => 'publish',
        'order'           => 'ASC',
        'orderby'         => 'date',
        "posts_per_page"  => 3,//取得件数
      );
      $posts = get_posts($args);
    
      //CSVで出力したいデータを配列に格納
      $origin_data = array();
      $data_header = implode( ",",array('ID','post_title','post_date'));
      array_push($origin_data,$data_header);
    
      foreach($posts as $post_data){
        $choice_data = implode( ",",array(
          $post_data->ID,
          $post_data->post_title,
          $post_data->post_date
        ));
        array_push($origin_data,$choice_data);
      }
    }
    

    시험에 var_dump()로 데이터를 출력하자.


    다음은 처리 단계 2 "ajax에서 CSV를 출력하는 PHP 파일 호출"을 구현합니다.
    다운로드 버튼을 클릭하면 CSV 파일을 다운로드할 수 있습니다.
    관리 페이지 측의 구현은 여기까지입니다.

    function-csvdownload.php
    //管理ページにCSVダウンロード用スクリプトを出力する
    csv_download_script();
    
    //2.ajaxでCSVを出力するPHPファイルを呼び出す
    $origin_data_json = json_encode($origin_data,JSON_UNESCAPED_UNICODE);
    
    //ダウンロードボタンを管理ページに出力
    print '<button onclick=\'csv_download('.$origin_data_json.','.date('Ymd').')\'>CSVダウンロード</button>';
    
    /*
    * CSVダウンロード用スクリプトを出力する
    */
    function csv_download_script(){
      print '
      <script>
      function csv_download(data,date){
        jQuery.ajax({
          url:"/your-theme/tools/csv/request.php",//CSVファイルを出力するPHPファイル
          dataType: "json",
          contentType: "application/json",
          type:"POST",
          data: JSON.stringify(data),
          beforeSend: function(xhr){
            xhr.overrideMimeType("text/plain; charset=shift_jis");//文字化けしないようにMIMEタイプをオーバーライドする
          },
          success: function(data) {
            if(data!=""){
              var downloadData = new Blob([data], {type: "text/csv"});
              var filename = date+"_post-data.csv";
              //ファイルのダウンロードにはブラウザ毎に処理を分ける必要があります!
              if(window.navigator.msSaveBlob){ // for IE
                window.navigator.msSaveBlob(downloadData, filename);
              }else{
                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);
              }
            }
          },
          error: function(xhr, textStatus, errorThrown){
            alert("CSVファイルのダウンロードに失敗しました。")
          }
        })
      }
    </script>
    ';
    }
    
    

    마지막으로 처리 순서 3 「ajax로부터 받은 데이터를 CSV 파일로서 출력한다」를 구현합니다

    request.php
    require_once(dirname(__FILE__)."/../../wp-load.php");
    $json = file_get_contents("php://input");
    $data = json_decode($json);
    //3.ajaxから受け取ったデータをCSVファイルとして出力する
    $csv="";
    foreach ($data as $value){
      $csv.=$value;
      $csv.="\n";
    }
    
    header("Content-Type: application/octet-stream");
    header("Content-Disposition: attachment; filename=test.csv");
    
    echo(json_encode($csv));
    

    관리 페이지에서 원하는 데이터가 CSV 파일로 출력되는지 확인해 봅시다.

    파일 내용도 문제없이 출력할 수 있을까 생각합니다.


    이상은 "WordPress 관리 페이지에서 ajax를 이용하여 CSV 파일을 다운로드하는 방법"이었습니다.
    여러분의 도움이 되면 다행입니다!

    좋은 웹페이지 즐겨찾기