Блог

Я успешно отобразил файл docx в браузере с помощью react-file-viewer. Я хочу добавить функцию увеличения и уменьшения масштаба к отображаемым файлам docx. Я пытался использовать react-zoom-pan-pinch, но он не будет работать с файлами docx. Это работает только для изображений.

Вот что я пробовал с помощью react-zoom-pan-pinch

 splitUrl(this.state.file, 'extention') === 'docx'
    ? (
        <div className='pdf-container'>
           <TransformWrapper
            defaultScale={1}
            defaultPositionX={20}
            defaultPositionY={10}
           >
            {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
              <React.Fragment>
                <div className="tools">
                    <button className="fas fa-search-plus fa-2x" onClick={zoomIn}> </button>
                    <button className="fas fa-search-minus fa-2x" onClick={zoomOut}>-</button>
                    <button className="fas fa-redo-alt fa-2x" onClick={resetTransform}>x</button>
                </div>
                <TransformComponent>
                    <div id="output-frame-id">
                        <FileViewer
                        fileType={'docx'}
                        filePath={this.state.file} //this.state.file has path of the url data
                        key={this.state.file}
                        allowFullScreen={true}
                        />
                    </div>
                </TransformComponent>
             </React.Fragment>
           )}
        </TransformWrapper>                                                 
   </div>

  

Я думаю, это работает только для img, потому что, когда я добавил это, я не могу прокрутить вниз до файла docx.

Есть ли какой-либо другой способ увеличить и уменьшить масштаб файлов docx в react.