I have a doc file that I get from API and have to show it with the preview on React 18. And for this, I use docx-preview
. And the document shows without a problem. My problem is with the options of this library. I have to give breakPages
option. But I cann’t do it.
My current working code
import axiosInstance from 'api/axios';
import * as docx from 'docx-preview';
import { useEffect, useRef } from 'react';
import { useReactToPrint } from 'react-to-print';
import { download_File } from 'api/file';
const WordPreview = ({ file, setFilePreviewModal }) => {
const componentRef = useRef();
// Function to trigger the print action
const handlePrint = useReactToPrint({
content: () => componentRef.current,
});
useEffect(() => {
if (file) {
axiosInstance({
method: 'get',
url: `/files/download`,
params: {
filePath: file?.path,
},
responseType: 'arraybuffer',
})
.then((res) => docx.renderAsync(res.data, document.getElementById('panel-section')).then(() => {}))
.catch((err) => {
console.log(err)
setFilePreviewModal(false);
});
}
}, [file]);
return (
<div>
<div>
<button onClick={handlePrint}>PRINT</button>
</div>
<div id="panel-section" ref={componentRef} style={{ height: '80vh', overflowY: 'visible' }}></div>
</div>
);
};
export default WordPreview;
I tried to give a option as an object like this
axiosInstance(...)
.then((res) => docx.renderAsync({
data: template,
bodyContainer: document.getElementById("panel-section")
option: { breakPages: true}
}).then(() => {}))
But it does not work. If I hover renderAsync
I get this message
function renderAsync(data: any, bodyContainer: HTMLElement, styleContainer?: HTMLElement, options?: Partial<docx.Options>): Promise<any>