reactjs - 用于 Sharepoint 自定义列表的 SPFx React FileViewer
问题描述
我是 SPFx 和 React 的新手。要求是读取 Sharepoint 自定义列表并使用自定义外观呈现列表列。这是实现并阅读所有附件(多个附件,对于单个列表项)。
如何在浏览器中使用 React FileViewer(多个)打开所有附件?
public render(): React.ReactElement<ICirDetailsProps> {
this._renderListAsync();
return(
<div className="${ styles.cirDetails }">
<div className="${ styles.container }">Circulars<br/>
<div id="cirDetails" className="${ styles.details}"></div>
</div>
</div>
);
}
attachments.forEach((afile: any) => {
let fileUrl = hostURL + afile.ServerRelativeUrl;
let fileExt = this.getFileExtension(afile.ServerRelativeUrl);
attFiles += `<FileViewer fileType='${fileExt}' filePath='${afile.ServerRelativeUrl}' /><br/>`;
});
const listContainer: Element = document.querySelector("#cirDetails") as HTMLElement;
listContainer.innerHTML=html;
它没有显示错误,但附件未在浏览器中打开。我可以看到 React FileViewer 标签使用 F12 呈现为 HTML 内容。我在这里做错了什么?
解决方案
示例演示:
import * as React from 'react';
import styles from './MyReactFileViewer.module.scss';
import { IMyReactFileViewerProps } from './IMyReactFileViewerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import FileViewer from 'react-file-viewer';
import * as CSS from 'csstype';
import { sp } from "@pnp/sp";
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types";
import "@pnp/sp/webs";
import "@pnp/sp/lists/web";
import "@pnp/sp/items";
import "@pnp/sp/attachments";
interface IPnpstate {
attachments: any[]
}
export default class MyReactFileViewer extends React.Component<IMyReactFileViewerProps, IPnpstate> {
constructor(props: IMyReactFileViewerProps, state: IPnpstate) {
super(props);
this.state = {
attachments: []
};
}
public componentDidMount() {
let item = sp.web.lists.getByTitle("MyList").items.getById(18);
// get all the attachments
item.attachmentFiles.get().then((files:IAttachmentInfo[]) => {
var attachs=[];
files.map(file=>{
var fileType=file.FileName.split('.').pop();
var fileUrl=file.ServerRelativeUrl;
attachs.push({"fileType":fileType,"fileUrl":fileUrl});
})
console.log(attachs);
this.setState({attachments:attachs});
});
}
public render(): React.ReactElement<IMyReactFileViewerProps> {
return (
<div className={styles.myReactFileViewer}>
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Welcome to SharePoint!</span>
<p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
<p className={styles.description}>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={styles.button}>
<span className={styles.label}>Learn more</span>
</a>
{(this.state.attachments || []).map((item, index) => (
<div key={item.ID}>
<FileViewer
fileType={item.fileType}
filePath={item.fileUrl}
/>
</div>
))}
</div>
</div>
</div>
</div>
);
}
}
推荐阅读
- nestjs - 如何在服务中获取响应对象?
- key - GPG 不提示输入密码 [已解决]
- java - Jmeter Java 请求可以有摘要报告吗?
- c++ - xtensor-blas 计算不正确
- c# - C# WPF 嵌套 ListView 在子项中单击时需要更改父项的 SelectedItem
- javascript - Odoo:JS 自定义小部件在卸载发票模块后停止工作
- django - 如何绕过 django 过滤器中的 WSGI 错误
- awk - 使用 awk 在特定单词之后/之前提取单词的问题
- python - 如何使用 python 从目录创建新的 csv 文件?
- google-cloud-platform - 如何从 Google Cloud Platform 服务调用桌面应用程序?