【antd 3.x】upload上傳元件預覽pdf格式檔案和下載ofd格式檔案

之前寫過upload元件關於圖片的上傳和預覽，本篇不再講解，可見文章【antd 3.x】在表單中使用上傳元件上傳圖片（檔案）和預覽功能

本篇文章主要內容：
是關於pdf和ofd格式的檔案的預覽和下載，瀏覽器不支援預覽ofd格式檔案，只能下載。

1、首先宣告，upload元件是不支援顯示pdf和ofd檔案格式的縮圖的【這裡使用業務解決，讓設計給一個pdf和ofd的模板圖片，當上傳的檔案為pdf或ofd格式時，顯示該模板圖片】

2、pdf預覽用到了iframe標籤，也可以使用embed標籤

3、ofd檔案下載

程式碼示例：

說明：（1）上傳元件listType為picture-card時，滑鼠懸浮預設顯示預覽和刪除兩個小圖示，官方文件中還有一個下載，下載圖示不會預設顯示，需要設定 showUploadList 屬性，將 showDownloadIcon 設定為true，才會顯示下載小圖示，此時方可觸發onDownload方法。

  const [previewVisible, setPreviewVisible] = useState(false);
  const [fileList, setFileLists] = useState([]);
  const [previewImage, setPreviewImage] = useState('');
  /* 當前檔案的格式
   * 涉及到 預覽、下載、刪除
   * png/jpg/jpeg:預覽（圖片的預覽）和刪除
   * pdf：預覽（pdf格式的預覽）和刪除
   * ofd：下載和刪除
   */
  const [currentFileType, setCurrentFileType] = useState(''); // 當前檔案的格式

  // upload的屬性
  const props = {
    action: uploadUrl,
    method: 'POST',
    listType: 'picture-card',
    accept: '.jpeg,.jpg,.png,.pdf,.ofd,image/jpeg,image/jpg,image/png,application/pdf,',
    showUploadList:
      currentFileType === 'ofd'
        ? { showDownloadIcon: true, showRemoveIcon: true, showPreviewIcon: false }
        : { showDownloadIcon: false, showRemoveIcon: true, showPreviewIcon: true },
  };

  // 檔案預覽
  const handlePreview = async (file) => {
    setPreviewImage(file.preview);
    setPreviewVisible(true);
  };
  // 檔案下載
  const handleDownload = (file) => {
    window.location.href = file?.preview; // 使用真正的檔案地址進行下載
  };
  // 檔案上傳
 const normFile = (e) => {
    ······
    if (e?.response || e[0]?.response || e?.fileList[0]?.response) {
      const res = e?.response || e[0]?.response || e?.fileList[0]?.response;
      if (res?.code !== 200) {
        message.error(res?.message);
        setFileLists([]);
        return [];
      }
      const url = res.data.filePath;
      e.fileList[0].thumbUrl = url;  // 用於顯示檔案的縮圖
      e.fileList[0].preview = url;  // 預覽時真正的檔案連結
      if (url) {
        const urlArr = url.split('.') || [];
        const fileType = urlArr[urlArr?.length - 1];  // 獲取當前檔案格式
        if (fileType?.toLowerCase() === 'pdf') { // 如果是pdf
          e.fileList[0].thumbUrl = pdfUrl;  // 使用pdf的模板圖片，pdfUrl是引入的一個靜態檔案地址require('@static/../..')
          setCurrentFileType('pdf');
        } else if (fileType?.toLowerCase() === 'ofd') {  // 如果是ofd
          e.fileList[0].thumbUrl = ofdUrl; // 使用ofd的模板圖片，ofdUrl也是引入的一個靜態檔案地址
          setCurrentFileType('ofd');
        } else {
          setCurrentFileType('image');
        }
        setPreviewImage(url);
      }
      setFileLists(e.fileList);
      return e && e.fileList;
    }
    setFileLists(e.fileList);
    return e && e.fileList;
  };

<FormItem label="檔案">
   {getFieldDecorator('file', {
    valuePropName: 'fileList',
    getValueFromEvent: normFile,
  })(
    <Upload onPreview={handlePreview} onDownload={handleDownload} {...props}>
        {fileList?.length >= 1 ? null : uploadButton}
    </Upload>,
   )}
    <Modal
      className={styles['invoice-attachment']}
      visible={previewVisible}
      footer={null}
      onCancel={handleCancel}
      width={1000}
     >
      {currentFileType === 'pdf' ? (
         <iframe
            title="PDF"
            className="scrolling"
            scrolling="no"
            frameBorder="0"
            id="press"
            src={previewImage}
            width="100%"
            height={630}
         />
        ) : (
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        )}
  </Modal>
</FormItem>

圖片示例

PDF
固定的模板圖片

預覽真實的檔案

OFD
固定的模板圖片

點選下載圖片即可下載檔案