如何在react-documents中禁用/隐藏下载按钮？URL参数无效求助

问题原因 #

你用#toolbar=0&navpanes=0&scrollbar=0这种锚点参数是错误的——Google文档查看器的控制参数需要以查询参数（?/&）形式传递，且必须配合embedded=true才能启用嵌入模式的参数控制。另外直接拼接URL到url属性里，可能被react-doc-viewer组件的内部逻辑处理掉，导致参数失效。

可行解决方案 #

1. 正确传递查询参数

把控制参数放到组件的queryParams属性中，或者正确拼接URL的查询参数部分：

<DocumentViewer
    style={{ height: "100vh", width: "100%" }}
    queryParams="hl=eg&embedded=true&toolbar=0&navpanes=0&scrollbar=0"
    url={fileurl}
    viewer="google"
    overrideLocalhost="https://react-doc-viewer.firebaseapp.com/"
/>

或者直接拼接URL（注意先判断原URL是否已有查询参数）：

const formattedUrl = fileurl.includes('?') 
  ? `${fileurl}&embedded=true&toolbar=0&navpanes=0&scrollbar=0`
  : `${fileurl}?embedded=true&toolbar=0&navpanes=0&scrollbar=0`;

<DocumentViewer
    style={{ height: "100vh", width: "100%" }}
    queryParams="hl=eg"
    url={formattedUrl}
    viewer="google"
    overrideLocalhost="https://react-doc-viewer.firebaseapp.com/"
/>

2. 注意Google服务的限制

• 如果你的文档本身设置了公开可下载权限，即使传递toolbar=0，Google查看器仍可能显示下载按钮，这是Google的服务限制，无法通过参数完全屏蔽。
• Google会不定期调整查看器的参数支持，部分旧参数可能失效，若上述参数无效，可尝试chrome=0（隐藏Chrome工具栏）等替代参数。

3. 自定义CSS隐藏（需解决跨域问题）

如果iframe不存在跨域限制（或你能控制嵌入页面的域名），可以通过CSS定位下载按钮并隐藏：

/* 请根据实际iframe的类名调整选择器 */
.react-doc-viewer iframe #toolbar [aria-label="Download"] {
  display: none !important;
}

若存在跨域，这种方法直接无效，此时建议更换为可完全自定义UI的文档查看器（如PDF.js针对PDF文件）。

内容的提问来源于stack exchange，提问作者Vaishnavu