如何在react-pdf-viewer中创建自定义按钮？
如何在react-pdf-viewer中创建自定义按钮？
提问于 2021-09-12 22:10:34
我在React应用程序中使用react-pdf-viewer，需要自定义按钮图像以适应应用程序的样式。我可以让查看器显示正确的按钮样式，但是当按钮被单击时，它不会做任何事情，当悬停在上面时，它也不会显示工具提示。我尝试将onClick函数附加到按钮的各个元素，但它们只在呈现时触发，而不是在单击时触发。
这是查看器的主要代码；我首先尝试让download按钮工作，然后将解决方案用于其他按钮。
import { Viewer, Worker } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { zoomPlugin } from '@react-pdf-viewer/zoom';
import { getFilePlugin } from '@react-pdf-viewer/get-file';
import { DownloadButton } from './Components/Buttons';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import '@react-pdf-viewer/toolbar/lib/styles/index.css';
const App = () => {
const zoomPluginInstance = zoomPlugin();
const { ZoomPopover } = zoomPluginInstance;
const getFilePluginInstance = getFilePlugin();
const { Download } = getFilePluginInstance;
const renderToolbar = (Toolbar) => (
<Toolbar>
{(slots) => {
const { NumberOfPages, CurrentPageInput, ZoomIn, ZoomOut, Print } = slots;
return (
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
marginRight: 40
}}
>
<div style={{display: 'flex', alignItems: 'center'}}>
<div style={{ padding: '0px 5px' }}>
<CurrentPageInput style={{fontSize: 16}} />
</div>
<div style={{ padding: '0px 5px 3px' }}>
/ <NumberOfPages /> pages
</div>
</div>
<div className="zoomControls" style={{display: 'flex', alignItems: 'center'}}>
<div style={{ padding: '0px 5px' }}>
<ZoomOut />
</div>
<div style={{ padding: '0px 5px', backgroundColor: '#fff', borderRadius: 4 }}>
<ZoomPopover />
</div>
<div style={{ padding: '0px 5px' }}>
<ZoomIn />
</div>
</div>
<div style={{display: 'flex', alignItems: 'center'}}>
<div style={{ padding: '0px 5px', marginLeft: 'auto' }}>
<Print />
</div>
<div style={{ padding: '0px 5px' }}>
<Download>
{() => (
<DownloadButton />
)}
</Download>
</div>
</div>
</div>
);
}}
</Toolbar>
);
const defaultLayoutPluginInstance = defaultLayoutPlugin({
renderToolbar,
sidebarTabs: (defaultTabs) => [defaultTabs[0]],
});
return (
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.9.359/build/pdf.worker.js">
<div className="pdfContainer">
<Viewer
fileUrl={'https://file-examples-com.github.io/uploads/2017/10/file-example_PDF_1MB.pdf'}
plugins={[defaultLayoutPluginInstance, zoomPluginInstance, getFilePluginInstance]}
/>
</div>
</Worker>
);
};
export default App;这是导入的下载按钮
export const DownloadButton = () => (
<button className="downloadButton" aria-label="Download">
<img src={process.env.PUBLIC_URL + '/icons/download.svg'} className="btButton" alt="Download" />
</button>
);回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-13 04:24:40
至于下载文件，您似乎忘记了使用download按钮的props。
您需要做的是添加属性，然后将onClick处理程序传递给DownloadButton，如下所示：
<Download>
{(props) => (
<DownloadButton onCLick={props.onClick} />
)}
</Download>由于DownloadButton是按钮的包装器，因此还需要将onClick定义为一个道具，然后将其向下传递给HTML button元素。
/**
* A button used to download the a PDF.
*
* @param {Object} [props]
* @param {*} [props.onClick] The @react-pdf-viewer/get-file click handler.
*/
export const DownloadButton = (props) => {
return (
/** Pass the download button's `onClick` handler to this button. */
<button
onClick={props.onClick}
className="downloadButton"
aria-label="Download"
>
<img
src={process.env.PUBLIC_URL + "/icons/download.svg"}
className="btButton"
alt="Download"
/>
</button>
);
};就工具提示而言，除非您使用默认的DownloadButton provided by `@react-pdf-viewer/get-file，否则您必须自己实现它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69155553
复制相关文章
相似问题
腾讯云开发者
