amis-rpc-design/libs/amis/packages/office-viewer/examples/app.ts
2023-10-07 19:42:30 +08:00

218 lines
4.6 KiB
TypeScript

/**
* 本地测试例子
*/
import XMLPackageParser from '../src/package/XMLPackageParser';
import Word from '../src/Word';
const viewerElement = document.getElementById('viewer') as HTMLElement;
const testDir = '__tests__/docx';
const fileLists = {
simple: [
'br.xml',
'bold.xml',
'drop-cap.xml',
'em.xml',
'embed-font.xml',
'hideMark.xml',
'highlight.xml',
'image.xml',
'image-var.docx',
'info.xml',
'link.xml',
'list.xml',
'math.xml',
'noBreakHyphen.xml',
'pinyin.xml',
'svg.xml',
'sym.xml',
'shadow.xml',
'shape-ellipse.xml',
'shape-custom.xml',
'all-shape-1.xml',
'all-shape-2.xml',
'tableborder.xml',
'tablestyle.xml',
'textbox.xml',
'textbox-background.xml',
'textbox-behindDoc.xml',
'textbox-vert.xml',
'textbox-rotation.xml',
'textbox-order.xml',
'tooltip.xml',
'w.xml',
'jianli.docx',
'text-background.docx',
'group.docx',
'group-in-group.docx',
'shape-group.docx',
'tab2.xml'
],
docx4j: [
'ArialUnicodeMS.docx',
'Symbols.docx',
'Word2007-fonts.docx',
'chart.docx',
'decracdiscrim1.docx',
'docProps.docx',
'fonts-modesOfApplication.docx',
'hyperlinks-internal.docx',
'toc.docx',
'unmarshallFromTemplateDirtyExample.docx',
'unmarshallFromTemplateExample.docx',
'numberingrestart.xml',
'sample-docx.xml',
'table-features.xml',
'table-spans.xml'
]
};
// local storage 里的 key
const pageKey = 'page';
const page = !!localStorage.getItem(pageKey) || false;
if (page) {
// 不知道为啥,大概是 vite 的问题
setTimeout(() => {
const pageSwitch = document.getElementById(
'switchPage'
)! as HTMLInputElement;
pageSwitch.checked = true;
}, 0);
}
(window as any).switchPage = (checked: boolean) => {
if (checked) {
localStorage.setItem(pageKey, 'true');
} else {
localStorage.removeItem(pageKey);
}
location.reload();
};
/**
* 生成左侧文件列表
*/
const fileListElement = document.getElementById('fileList')!;
for (const dirName in fileLists) {
fileListElement.innerHTML += `<h2 class="dir">${dirName}</h2>`;
const dir = dirName as keyof typeof fileLists;
for (const file of fileLists[dir]) {
const fileName = file.split('.')[0];
fileListElement.innerHTML += `<div class="file" data-path="${dirName}/${file}" title="${file}">${fileName}</div>`;
}
}
document.querySelectorAll('.file').forEach(file => {
file.addEventListener('click', elm => {
const fileName = (elm.target as Element).getAttribute('data-path')!;
history.pushState({fileName}, fileName, `?file=${fileName}`);
renderDocx(fileName);
});
});
const data = {
date: 'amis',
list: [
{
item1: 'item1.0',
item2: 'item2.0',
img: '/examples/static/image/firefox.jpg'
},
{
item1: 'item1.1',
item2: 'item2.1',
img: '/examples/static/image/ie.png'
}
],
list2: [
{
item1: 'item2-1.0',
item2: 'item2-2.0',
img: '/examples/static/image/firefox.jpg'
},
{
item1: 'item2-1.1',
item2: 'item2-2.1',
img: '/examples/static/image/ie.png'
}
],
sum: 'sum20',
aImg: '/examples/static/image/ie.png'
};
const renderOptions = {
debug: true,
page,
data,
enableVar: true
};
async function renderDocx(fileName: string) {
const filePath = `${testDir}/${fileName}`;
const file = await (await fetch(filePath)).arrayBuffer();
renderWord(file, fileName);
}
const url = new URL(location.href);
const initFile = url.searchParams.get('file');
if (initFile) {
renderDocx(initFile);
}
// 支持临时拖拽文件到页面里显示
document.addEventListener('dragover', function (event) {
event.preventDefault();
});
document.addEventListener(
'drop',
e => {
e.preventDefault();
let dt = e.dataTransfer!;
let files = dt.files;
renderDropWord(files[0]);
},
false
);
function renderWord(data: ArrayBuffer, fileName: string) {
let word: Word;
if (fileName.endsWith('.xml')) {
word = new Word(data, renderOptions, new XMLPackageParser());
} else {
word = new Word(data, renderOptions);
}
const fileNameSplit = fileName.split('/');
const downloadName = fileNameSplit[fileNameSplit.length - 1].replace(
'.xml',
'.docx'
);
(window as any).downloadDocx = () => {
word.download(downloadName);
};
(window as any).printDocx = () => {
word.print();
};
word.render(viewerElement);
}
function renderDropWord(file: File) {
const reader = new FileReader();
reader.onload = _e => {
const data = reader.result as ArrayBuffer;
renderWord(data, file.name);
};
reader.readAsArrayBuffer(file);
}