Import file excel tới data dùng thư viện php excel và vue js

01/10/2022 07:45 571

Table of Contents

Trong tut này mình sẽ chia sẽ như thế nào để import một file excel vào database dùng php excel cho thư viện php và vue js cho phần javascript

Thư viện php excel

Thư viện này anh chị có thể tải từ https://github.com/nguyentantung/library-php-excel

Code mẫu dùng cho việc import file excel

function stocksCodeExcelToData($path_file){
			//include PHPExcel
			include CHECKSTOCKSCODE_LIBS_DIR.'phpexcel/Classes/PHPExcel.php';
			//path file
			$file = $path_file;
			//confirm file
			$objFile = \PHPExcel_IOFactory::identify($file);
			$objData = \PHPExcel_IOFactory::createReader($objFile);
			
			//only read
			$objData->setReadDataOnly(true);
			
			// Load data to object
			$objPHPExcel = $objData->load($file);
			
			//Get page number use getSheetCount();
			//Get page name use getSheetNames();
			
			//Select page need to read
			$sheet = $objPHPExcel->setActiveSheetIndex(0);
			
			//Get last row
			$Totalrow = $sheet->getHighestRow();
			//Get colunm name the last
			$LastColumn = $sheet->getHighestColumn();
			$TotalCol = \PHPExcel_Cell::columnIndexFromString($LastColumn);
		
			$data = array();
	
			for ($i = 2; $i <= $Totalrow; $i++) {
				for ($j = 0; $j < $TotalCol; $j++) {
					$data[$i - 2][$j] = $sheet->getCellByColumnAndRow($j, $i)->getValue();;
				}
			}
			if($data): 
				
				
				foreach($data as $key=>$data_item):
					$this->stocksCodeInsert($data_item[0], $note='');
				endforeach;
			
			endif;
			//return $data;
			
	}

function stocksCodeExcelToData($path_file){

//include PHPExcel

include CHECKSTOCKSCODE_LIBS_DIR.'phpexcel/Classes/PHPExcel.php';

//path file

$file = $path_file;

//confirm file

$objFile = \PHPExcel_IOFactory::identify($file);

$objData = \PHPExcel_IOFactory::createReader($objFile);

//only read

$objData->setReadDataOnly(true);

// Load data to object

$objPHPExcel = $objData->load($file);

//Get page number use getSheetCount();

//Get page name use getSheetNames();

//Select page need to read

$sheet = $objPHPExcel->setActiveSheetIndex(0);

//Get last row

$Totalrow = $sheet->getHighestRow();

//Get colunm name the last

$LastColumn = $sheet->getHighestColumn();

$TotalCol = \PHPExcel_Cell::columnIndexFromString($LastColumn);

$data = array();

for ($i = 2; $i <= $Totalrow; $i++) {

for ($j = 0; $j < $TotalCol; $j++) {

$data[$i - 2][$j] = $sheet->getCellByColumnAndRow($j, $i)->getValue();;

}

if($data):

foreach($data as $key=>$data_item):

$this->stocksCodeInsert($data_item[0], $note='');

endforeach;

endif;

//return $data;

}

Function này anh chị truyền vào path đến file anh chị thu được khi submit, anh chị chỉ cần lưu ý chỗ $data_item[0] là colunm 1 tương tự như vận dữ liệu ở colunm 2 sẽ là $data_item[1]

Code php xử lý ajax

function importStocksCodeFromExcel(){
		$file = $_FILES['fileExcel'];
		$results=array();
		//upload file
		$upload_dir = wp_upload_dir();
		$results['wp_upload_dir'] = $upload_dir;
		if(!empty($file)){
			$target_dir = $upload_dir['basedir']."/";
			$target_file = $target_dir . basename($file["name"]);
			$uploadOk = 1;
			$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
			$message='';
			// Check if file already exists
			if (file_exists($target_file)) {
			  $message = "File đã có trong hệ thống.";
			  $uploadOk = 0;
			}
			
			// Check file size
			if ($_FILES["fileToUpload"]["size"] > 50000) {
			  $message = "Chỉ cho file 10 mg trở lại";
			  $uploadOk = 0;
			}
			
			// Allow certain file formats
			$allow_file_formats=array("pdf","xlsx","xls","doc","docx");
			if(!in_array($imageFileType,$allow_file_formats)) {
			  $message = "Chi cho phép file pdf, excel, word";
			  $uploadOk = 0;
			}
			
			// Check if $uploadOk is set to 0 by an error
			if ($uploadOk == 0) {
				 $results['message']=$message;
			} else {
			  if (move_uploaded_file($file["tmp_name"], $target_file)) {
				  $results['stocksCodeExcelToData'] = $this->stocksCodeExcelToData($target_file);
				  $results['target_file']=$target_file;
				  @unlink($target_file);
				 $results['message']="Đã import thành công!";
			  } else {
				 $results['message']="Có lỗi trong quá trình upload";
			  }
			}
		}
		
		wp_send_json_success($results);
	}

function importStocksCodeFromExcel(){

$file = $_FILES['fileExcel'];

$results=array();

//upload file

$upload_dir = wp_upload_dir();

$results['wp_upload_dir'] = $upload_dir;

if(!empty($file)){

$target_dir = $upload_dir['basedir']."/";

$target_file = $target_dir . basename($file["name"]);

$uploadOk = 1;

$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

$message='';

// Check if file already exists

if (file_exists($target_file)) {

$message = "File đã có trong hệ thống.";

$uploadOk = 0;

}

// Check file size

if ($_FILES["fileToUpload"]["size"] > 50000) {

$message = "Chỉ cho file 10 mg trở lại";

$uploadOk = 0;

}

// Allow certain file formats

$allow_file_formats=array("pdf","xlsx","xls","doc","docx");

if(!in_array($imageFileType,$allow_file_formats)) {

$message = "Chi cho phép file pdf, excel, word";

$uploadOk = 0;

}

// Check if $uploadOk is set to 0 by an error

if ($uploadOk == 0) {

$results['message']=$message;

} else {

if (move_uploaded_file($file["tmp_name"], $target_file)) {

$results['stocksCodeExcelToData'] = $this->stocksCodeExcelToData($target_file);

$results['target_file']=$target_file;

@unlink($target_file);

$results['message']="Đã import thành công!";

} else {

$results['message']="Có lỗi trong quá trình upload";

}

wp_send_json_success($results);

}

function stocksCodeInsert

đây là function insert data sau khi lấy từ file excel

function stocksCodeInsert($code, $note=''){
		global $wpdb;
		$table = $wpdb->prefix.'stocks_code';
		$data = array(
			'code' => $code,
			'note' => $note
		);
		$format = array('%s', '%s');
		$wpdb->insert($table,$data,$format);
		$my_id = $wpdb->insert_id;
		return $my_id;
	}

function stocksCodeInsert($code, $note=''){

global $wpdb;

$table = $wpdb->prefix.'stocks_code';

$data = array(

'code' => $code,

'note' => $note

);

$format = array('%s', '%s');

$wpdb->insert($table,$data,$format);

$my_id = $wpdb->insert_id;

return $my_id;

}

Các bài viết khác có thể hữu ích với bạn

Code xử lý vue js

Trong ví dụ này mình sẽ tạo một modal như hình bên dưới

Code modal này mình sử dụng thu viện [email protected], sau đây là code

<q-dialog v-model="modalImportFromExcel">
		<q-card style="width: 500px; max-width: 80vw;">
			<q-card-section class="row items-center q-pb-none">
				<div class="text-h6">Import từ file excel</div>
				<q-space></q-space>
				<q-btn icon="close" flat round dense v-close-popup ></q-btn>
			</q-card-section>
			<q-card-section >
				<template>
				<div class="q-pa-md">
					<div class="q-gutter-md" style="max-width: 800px">
						<div class="row q-col-gutter-md q-mb-md">
						<div class="col-12">
						 <q-file color="purple-12" v-model="fileExcel" label="Chọn file excel">
        <template v-slot:prepend>
          <q-icon name="attach_file" />
        </template>
      </q-file>
						</div>
						</div>
						<div class="row q-col-gutter-md q-mb-md">
						<div class="col-4">
						<button class="custom-btn"  @click="triggerImportFromExcel" v-html="triggerImportFromExcelText" ></button>
						</div>
						<div class="col-8"><a :href="excelUrlTemplate" download><i class="fa fa-cloud-download" aria-hidden="true"></i> Tải mẫu excel để import nếu chưa có</a></div>
						</div>
					</div>
				</div>
				</template>
			</q-card-section>
	</q-card>
	</q-dialog>

<q-dialog v-model="modalImportFromExcel">

<q-card style="width: 500px; max-width: 80vw;">

<q-card-section class="row items-center q-pb-none">

<div class="text-h6">Import từ file excel</div>

<q-space></q-space>

<q-btn icon="close" flat round dense v-close-popup ></q-btn>

</q-card-section>

<q-card-section >

<q-file color="purple-12" v-model="fileExcel" label="Chọn file excel">

<q-icon name="attach_file" />

</template>

</q-file>

</div>

</div>

<div class="col-8"><a :href="excelUrlTemplate" download><i class="fa fa-cloud-download" aria-hidden="true"></i> Tải mẫu excel để import nếu chưa có</a></div>

</div>

</template>

</q-card-section>

</q-card>

</q-dialog>

Trong

data: () => ({
triggerImportFromExcelText: '<i class="fa fa-cloud-upload" aria-hidden="true"></i>&nbsp;Import',
modalImportFromExcel: false
})

data: () => ({

triggerImportFromExcelText: '<i class="fa fa-cloud-upload" aria-hidden="true"></i> Import',

modalImportFromExcel: false

})

Khi muốn mở modal anh chị chỉ cần viết một function đơn giản

methods: {
		openModalImportFromExcel(){
			this.modalImportFromExcel = true
		}
}

methods: {

openModalImportFromExcel(){

this.modalImportFromExcel = true

}

Giờ chúng ta sẽ đi viết code cho nút submit, ah ngoài thu viện [email protected] mình còn dùng axios cho phần bất đồng bộ

triggerImportFromExcel(){
			const file = this.fileExcel
			if(file === null){
				this.NOTIFY("Chưa chọn file excel!",0);
				return false;
			}
			if(file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
				this.NOTIFY("Vui lòng chọn file excel!",0);
				return false;
			}
			
			this.triggerImportFromExcelText = '<i class="fa fa-spinner fa-spin"></i>&nbsp;Import'
			axios.post(
				check_stocks_code_vars.ajax_url, 
				this.jsonToFormData({
					action: 'importStocksCodeFromExcel',
					fileExcel: this.fileExcel
					
				})
			).then(res => {
				const response = res.data.data
				this.triggerImportFromExcelText = '<i class="fa fa-cloud-upload" aria-hidden="true"></i>&nbsp;Import'
				this.NOTIFY(response.message,1)
				this.modalImportFromExcel = false
			  
			})
		}

triggerImportFromExcel(){

const file = this.fileExcel

if(file === null){

this.NOTIFY("Chưa chọn file excel!",0);

return false;

}

if(file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){

this.NOTIFY("Vui lòng chọn file excel!",0);

return false;

}

this.triggerImportFromExcelText = '<i class="fa fa-spinner fa-spin"></i> Import'

axios.post(

check_stocks_code_vars.ajax_url,

this.jsonToFormData({

action: 'importStocksCodeFromExcel',

fileExcel: this.fileExcel

})

).then(res => {

const response = res.data.data

this.triggerImportFromExcelText = '<i class="fa fa-cloud-upload" aria-hidden="true"></i> Import'

this.NOTIFY(response.message,1)

this.modalImportFromExcel = false

})

}

function jsonToFormData, nói chung các function nào dùng chung thì mình sẽ bỏ vào chỗ này

Vue.mixin({
 methods:{
	openURL(url){
	Quasar.utils.openURL(url)
	},
	addCommas(nStr) {
			  nStr += '';
			  let x = nStr.split('.');
			  let x1 = x[0];
			  let x2 = x.length > 1 ? '.' + x[1] : '';
			  let rgx = /(\d+)(\d{3})/;
			  while (rgx.test(x1)) {
				  x1 = x1.replace(rgx, '$1' + ',' + '$2');
			  }
			  return x1 + x2;
	},
	buildFormData(formData, data, parentKey) {
		if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
		  Object.keys(data).forEach(key => {
			this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
		  });
		} else {
		  const value = data == null ? '' : data;
	
		  formData.append(parentKey, value);
		}
	  },
	jsonToFormData(data) {
		const formData = new FormData();
	
		this.buildFormData(formData, data);
	
		return formData;
	},
	NOTIFY(msg, type = 1){
		this.$q.notify({
			message: msg,
			color: type == 1 ? 'green' : 'red',
			position: 'top',
			timeout: 2000
		  })	
	},
	
	deepMerge(target, source) {
				Object.entries(source).forEach(([key, value]) => {
					if (value && typeof value === 'object') {
						this.deepMerge(target[key] = target[key] || {}, value);
						return;
					}
					target[key] = value;
				});
				return target;
	}
 }
})

Vue.mixin({

methods:{

openURL(url){

Quasar.utils.openURL(url)

addCommas(nStr) {

nStr += '';

let x = nStr.split('.');

let x1 = x[0];

let x2 = x.length > 1 ? '.' + x[1] : '';

let rgx = /(\d+)(\d{3})/;

while (rgx.test(x1)) {

x1 = x1.replace(rgx, '$1' + ',' + '$2');

}

return x1 + x2;

buildFormData(formData, data, parentKey) {

if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {

Object.keys(data).forEach(key => {

this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);

});

} else {

const value = data == null ? '' : data;

formData.append(parentKey, value);

}

jsonToFormData(data) {

const formData = new FormData();

this.buildFormData(formData, data);

return formData;

NOTIFY(msg, type = 1){

this.$q.notify({

message: msg,

color: type == 1 ? 'green' : 'red',

position: 'top',

timeout: 2000

})

deepMerge(target, source) {

Object.entries(source).forEach(([key, value]) => {

if (value && typeof value === 'object') {

this.deepMerge(target[key] = target[key] || {}, value);

return;

}

target[key] = value;

});

return target;

}

})

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo modal để thay thế cho vue-js-modal trong vuejs 2 [ 25/02/2023 12:39 ]
Tạo event click ngoài một element trong vue js [ 10/12/2022 02:09 ]
Dùng datetime picker plugin jquery trong vuejs [ 04/11/2022 02:41 ]
Cách tạo form multi field row dùng vue js [ 16/10/2022 03:47 ]
Làm option settings wordpress bằng vue js [ 15/10/2022 09:39 ]
Thực hiện ajax trong vòng lặp trong vue js [ 05/10/2022 01:19 ]
Live search trong array với vue js [ 19/09/2022 03:44 ]
Phát hiện detect sự kiện out click cho một element trong vue js [ 19/09/2022 01:14 ]
Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js [ 09/09/2022 07:20 ]
Vue js trong một bài viết [ 10/08/2022 08:21 ]

Import file excel tới data dùng thư viện php excel và vue js

Thư viện php excel

Code php xử lý ajax

function stocksCodeInsert

Code xử lý vue js

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)