Report test; Map printing test

This commit is contained in:
cracklesparkle
2025-01-31 15:53:58 +09:00
parent 0788a401ca
commit c08f839b70
12 changed files with 323 additions and 57 deletions

View File

@ -1,4 +1,6 @@
import { Button, Flex } from "@mantine/core";
import { useState } from "react";
import createReport from 'docx-templates'
const xslTemplate = `<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
@ -904,9 +906,109 @@ const xslTemplate = `<?xml version="1.0" encoding="utf-8"?>
</xsl:stylesheet>`
const PrintReport = () => {
const handleGenerateExcel = () => {
// Define the example XML data
const xmlData = `
const [loading, setLoading] = useState(false);
const generateDocx = async () => {
setLoading(true);
try {
// Fetch the DOCX template from the public folder
const response = await fetch("/template.docx");
const response_table = await fetch("/template_table.docx");
const templateArrayBuffer = await response.arrayBuffer();
const templateArrayBuffer_table = await response_table.arrayBuffer();
// Convert ArrayBuffer to Uint8Array (Fix TypeScript error)
const templateUint8Array = new Uint8Array(templateArrayBuffer);
const templateUint8Array_table = new Uint8Array(templateArrayBuffer_table);
// Fetch the image (Example: Load from public folder)
const imageResponse = await fetch("/test.png"); // Change this to your image path
const imageBlob = await imageResponse.blob();
const imageArrayBuffer = await imageBlob.arrayBuffer();
const imageUint8Array = new Uint8Array(imageArrayBuffer);
// Generate the DOCX file with the replacement
const report = await createReport({
template: templateUint8Array, // Ensure it's Uint8Array
data: {
test: "Hello World",
myImage: {
width: 6, // Width in cm
height: 6, // Height in cm
data: imageUint8Array, // Image binary data
extension: ".png", // Specify the image format
},
},
});
const report_table = await createReport({
template: templateUint8Array_table, // Ensure it's Uint8Array
data: {
test: "Hello World",
rows: [
{
first: 'A',
second: 'B',
third: 'C',
fourth: 'D',
},
{
first: 'E',
second: 'F',
third: 'G',
fourth: 'H',
},
{
first: 'I',
second: 'J',
third: 'K',
fourth: 'L',
}
]
},
});
// Convert Uint8Array to a Blob
const blob = new Blob([report], {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
const blob_table = new Blob([report_table], {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
// Create a download link and trigger the download
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "report.docx";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// Create a download link and trigger the download
const url_table = URL.createObjectURL(blob_table);
const a_table = document.createElement("a");
a_table.href = url_table;
a_table.download = "report_table.docx";
document.body.appendChild(a_table);
a_table.click();
document.body.removeChild(a_table);
// Revoke the object URL after download
URL.revokeObjectURL(url);
URL.revokeObjectURL(url_table);
} catch (error) {
console.error("Error generating DOCX:", error);
} finally {
setLoading(false);
}
}
const handleGenerateExcel = () => {
// Define the example XML data
const xmlData = `
<root>
<Kvp>
<style_id>1</style_id>
@ -928,40 +1030,41 @@ const PrintReport = () => {
</root>
`;
// Parse the XSL template and XML data
const parser = new DOMParser();
const xslDoc = parser.parseFromString(xslTemplate, "application/xml");
const xmlDoc = parser.parseFromString(xmlData, "application/xml");
// Parse the XSL template and XML data
const parser = new DOMParser();
const xslDoc = parser.parseFromString(xslTemplate, "application/xml");
const xmlDoc = parser.parseFromString(xmlData, "application/xml");
// Apply the transformation
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslDoc);
const resultDocument = xsltProcessor.transformToDocument(xmlDoc);
// Apply the transformation
const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslDoc);
const resultDocument = xsltProcessor.transformToDocument(xmlDoc);
// Serialize the result to a string
const serializer = new XMLSerializer();
const resultXml = serializer.serializeToString(resultDocument);
// Serialize the result to a string
const serializer = new XMLSerializer();
const resultXml = serializer.serializeToString(resultDocument);
// Add missing Excel-specific headers if needed
const correctedXml = `<?xml version="1.0" encoding="utf-8"?>\n` + resultXml
// Add missing Excel-specific headers if needed
const correctedXml = `<?xml version="1.0" encoding="utf-8"?>\n` + resultXml
// Convert to Blob and trigger download
const blob = new Blob([correctedXml], { type: "application/vnd.ms-excel" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "template.xls";
link.click();
// Convert to Blob and trigger download
const blob = new Blob([correctedXml], { type: "application/vnd.ms-excel" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "template.xls";
link.click();
// Clean up
URL.revokeObjectURL(url);
}
// Clean up
URL.revokeObjectURL(url);
}
return (
<Flex p='sm'>
<Button onClick={handleGenerateExcel}>Сохранить в Excel</Button>
</Flex>
)
return (
<Flex p='sm' gap='sm'>
<Button onClick={generateDocx} disabled={loading}>{loading ? "Генерация отчета..." : "Сохранить в docx"}</Button>
<Button onClick={handleGenerateExcel}>Сохранить в Excel</Button>
</Flex>
)
}
export default PrintReport