코르도바 파일 읽,쓰 관련 플러그인 추가
cordova plugin add cordova-plugin-file파일 오픈관련 플러그인
npm 주소 : https://www.npmjs.com/package/cordova-plugin-file-opener2
cordova plugin add cordova-plugin-file-opener2(안드로이드 10이상 시 추가설치)
cordova plugin add cordova-plugin-androidx-adaptersrc/utils/exceljs.js
const Excel = require('exceljs');
//var { saveAs } = require('file-saver');
import { saveAs } from 'file-saver';
// 버튼 클릭한 경우
export const handleClick = () => {
try {
// 엑셀 생성
const workbook = new Excel.Workbook();
// 생성자
workbook.creator = '작성자';
// 최종 수정자
workbook.lastModifiedBy = '최종수정자';
// 생성일(현재 일자로 처리)
workbook.created = new Date();
// 수정일(현재 일자로 처리)
workbook.modified = new Date();
// addWorksheet() 함수를 사용하여 엑셀 시트를 추가한다.
// 엑셀 시트는 순차적으로 생성된다.
workbook.addWorksheet('Sheet One');
// 엑셀 시트를 접근하는 방법은 세 가지 방법이 존재한다.
// 1. getWorksheet() 함수에서 시트 명칭 전달
const sheetOne = workbook.getWorksheet('Sheet One');
//workbook.getWorksheet(0);
//workbook.worksheets[0];
// removeWorksheet() 함수를 사용하여 엑셀 시트를 제거한다.
//workbook.removeWorksheet(sheetOne.id);
// 컬럼 설정
// header: 엑셀에 표기되는 이름
// key: 컬럼을 접근하기 위한 key
// hidden: 숨김 여부
// width: 컬럼 넓이
sheetOne.columns = [
{ header: '이름', key: 'name', width: 40 },
{ header: '성별', key: 'gender', hidden: false, width: 30 },
{ header: '부서코드', key: 'deptCode', width: 60 },
{
header: '부서명',
key: 'deptName',
width: 100,
// 스타일 설정
style: {
// Font 설정
font: { name: 'Arial Black', size: 20 },
// Borders 설정
border: {
top: { style: 'thin', color: { argb: 'FF00FF00' } },
left: { style: 'thin', color: { argb: 'FF00FF00' } },
bottom: { style: 'thin', color: { argb: 'FF00FF00' } },
right: { style: 'thin', color: { argb: 'FF00FF00' } },
},
// Fills 설정
fill: {
type: 'pattern',
fgColor: { argb: 'FFFFFF00' },
bgColor: { argb: 'FF0000FF' },
},
},
},
];
const sampleData = [
{
name: '홍길동',
code: 'A100',
gender: 'F',
entryDate: '20200101',
deptCode: 'A1000',
deptName: '금융팀',
},
{
name: '마이콜',
code: 'A200',
gender: 'F',
entryDate: '20200201',
deptCode: 'A2000',
deptName: '자산팀',
},
{
name: '둘리',
code: '9999991234567',
gender: 'M',
entryDate: '20200301',
deptCode: 'A1000',
deptName: '금융팀',
},
{
name: '또치',
code: '9999992234567',
gender: 'M',
entryDate: '20200401',
deptCode: 'A2000',
deptName: '자산팀',
},
];
const borderStyle = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
};
sampleData.map((item, index) => {
sheetOne.addRow(item);
// 추가된 행의 컬럼 설정(헤더와 style이 다를 경우)
for (let loop = 1; loop <= 4; loop++) {
const col = sheetOne.getRow(index + 2).getCell(loop);
col.border = borderStyle;
col.font = { name: 'Arial Black', size: 40 };
}
});
workbook.xlsx.writeBuffer().then(data => {
// const blob = new Blob([data], {
// type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
// });
// const url = window.URL.createObjectURL(blob);
// const anchor = document.createElement('a');
// anchor.href = url;
// anchor.download = `테스트.xlsx`;
// anchor.click();
// window.URL.revokeObjectURL(url);
download(
'테스트.xlsx',
data,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
);
});
} catch (error) {
console.error(error);
}
};
function download(filename, data, mimeType) {
var blob = new Blob([data], {
type: mimeType,
});
if (window.cordova && window.cordova.platformId !== 'browser') {
document.addEventListener('deviceready', function () {
console.log('dd');
var storageLocation = '';
storageLocation = window.cordova.file.externalDataDirectory;
//storageLocation = window.cordova.file.externalRootDirectory + 'Download/';
console.log('window.cordova.file:');
console.log(window.cordova.file);
// switch (device.platform) {
// case 'Android':
// storageLocation = cordova.file.externalDataDirectory;
// break;
// case 'iOS':
// storageLocation = cordova.file.documentsDirectory;
// break;
// }
var folderPath = storageLocation;
window.resolveLocalFileSystemURL(
folderPath,
function (dir) {
dir.getFile(
filename,
{
create: true,
},
function (file) {
file.createWriter(
function (fileWriter) {
fileWriter.write(blob);
fileWriter.onwriteend = function () {
console.log('Successful file write...');
const isConfirm = window.confirm('파일을 여시겠습니까?');
if (isConfirm) {
//var url = file.toURL();
var url = file.nativeURL;
window.cordova.plugins.fileOpener2.open(url, mimeType, {
error: function error(err) {
console.error(err);
alert('Unable to open');
},
success: function success() {
console.log('success with opening the file');
},
});
}
};
fileWriter.onerror = function (err) {
alert('Unable to download');
console.error(err);
};
},
function (err) {
// failed
alert('Unable to download');
console.error(err);
},
);
},
function (err) {
alert('Unable to download');
console.error(err);
},
);
},
function (err) {
alert('Unable to download');
console.error(err);
},
);
});
} else {
saveAs(blob, filename);
}
}views/TestExcel.vue
<template>
<div>
<button @click="sampleExcel2">샘플다운로드2</button>
<br />
<a href="https://tbiz.kkulcon.com/upload/sendreq.xlsx">샘플다운로드3</a>
<br />
<button @click="aaaa">샘플다운로드 file</button>
{{ test }}
</div>
</template>
<script>
import { handleClick } from '@/utils/exceljs.js';
export default {
data() {
return {
test: '',
};
},
methods: {
sampleExcel2() {
location.href = 'https://tbiz.kkulcon.com/upload/sendreq.xlsx';
},
aaaa() {
handleClick();
},
},
};
</script>
참고 : https://esstudio.site/2019/02/16/downloading-saving-and-opening-files-with-cordova.html
