SPFx React FileViewer для пользовательского списка Sharepoint - PullRequest
Новая
       46

SPFx React FileViewer для пользовательского списка Sharepoint

0 голосов
/ 17 апреля 2020

Я новичок в 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 отображаются как HTML Содержимое с использованием F12. Какую ошибку я здесь делаю?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Я использовал тег IFrame, в зависимости от типов файлов, iframe отображает по-разному.

0 голосов
/ 20 апреля 2020

Пример демонстрации: 

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>
    );
  }
}
...