【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 파일로 출력
만드는 것
하고 싶은 것의 이미지를 잡을 수 없는 분은, 가 시나리오에 따라 기사를 읽어 보세요.
익숙해지면 CSV 파일로 출력되는 데이터를 정렬해보십시오.
이번 임시 시나리오는
"WordPress 관리 페이지에서 DB에서 게시 데이터를 검색하고 CSV 파일로 다운로드"
처리 흐름
1. CSV로 출력하고 싶은 데이터를 DB로부터 취득
2.ajax에서 CSV를 출력하는 PHP 파일 호출
3.ajax에서 받은 데이터를 CSV 파일로 출력
만드는 것
디렉토리 구조
wordpress/
├ tools/
│ └ csv/
│ └request.php/
├ wp-content/
│ └ themes/
│ └ your-theme/
│ └ functions/
│ └ function-csvdownload.php
│ └ functions.php
구현
1. 관리 페이지 만들기
wordpress에 처음부터 준비되어 있는 functions.php에 처리를 추가해도 좋지만, 하나의 파일이 너무 길어지지 않도록 이번 처리는 다른 파일에 기재해 갑니다.
functions.php에는 한 줄만 추가하십시오.
functions.phprequire_once(dirname(__FILE__)."/functions/function-csvdownload.php");
새 파일을 만든 후 관리 페이지를 추가합니다.
function-csvdownload.phpadd_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.phprequire_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 파일을 다운로드하는 방법"이었습니다.
여러분의 도움이 되면 다행입니다!
Reference
이 문제에 관하여(【WordPress】 WordPress 관리 페이지에서 ajax를 이용하여 CSV 파일을 다운로드하는 방법 (구현 해설 포함)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tsukahara-akito/items/36dbacf7d9f5d9415bae
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 파일을 다운로드하는 방법"이었습니다.
여러분의 도움이 되면 다행입니다!
Reference
이 문제에 관하여(【WordPress】 WordPress 관리 페이지에서 ajax를 이용하여 CSV 파일을 다운로드하는 방법 (구현 해설 포함)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tsukahara-akito/items/36dbacf7d9f5d9415bae텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)