Report test; Map printing test
This commit is contained in:
cracklesparkle
@ -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
|
||||
Reference in New Issue
Block a user