WatchPdf

WatchPdf

iframe+pdf src

// MOCK pdf
const [pdfUrl, setPdfUrl] = useState();
const [iframeVisible, setIframeVisible] = useState(false);
const [loading, setLoading] = useState(false);

// pdf预览动作
const watchPdf = () => {
  setIframeVisible(true);
  setLoading(true);

  // fetch(
  //   "http://www.lswz.gov.cn/html/ndbg/2019-03/28/243933/files/8cc8f0c824e74e3dbc06ac3e74355def.pdf"
  // )
  //   .then((res) => res.blob()) // 解析res值为blob
  //   .then((response) => {
  //     const url = URL.createObjectURL(response);
  //     setPdfUrl(url);
  //   })
  //   .finally(() => {
  //     setLoading(false);
  //   });
  setTimeout(() => {
    setPdfUrl(
      "http://www.lswz.gov.cn/html/ndbg/2019-03/28/243933/files/8cc8f0c824e74e3dbc06ac3e74355def.pdf"
    );
    setLoading(false);
  }, 500);
};

{
  /* pdf预览弹窗 */
}
{
  iframeVisible && (
    <FullscreenPdf
      pdfUrl={pdfUrl}
      closeModal={closeModal}
      loading={loading}
    ></FullscreenPdf>
  );
}

iframe + pdf blob 文件流

// pdf预览动作
const watchPdf = async (previewData) => {
  setIframeVisible(true);
  setLoading(true);

  const res = await get("***/common/downloadFile.do", {
    params: {
      ...previewData,
      taxnum: userInfo.taxnum,
    },
    responseType: "blob",
  });
  let name = res.headers["content-disposition"];
  let fileNameOrigin = `${decodeURIComponent(
    name.split(";")[1].split("=")[1]
  )}`;
  let isOfd = fileNameOrigin.includes("ofd");
  let isPdf = fileNameOrigin.includes("pdf");

  if (isOfd) {
    setIsOfd(isOfd);
    serPreviewData({ ...previewData, taxnum: userInfo.taxnum });
  } else if (isPdf) {
    let blob = new Blob([res.data], { type: "application/pdf" });
    let url = URL.createObjectURL(blob);

    setPdfUrl(url);
  }

  setLoading(false);
};

javascript - 如何预览以及下载 pdf 文件_个人文章 - SegmentFault 思否

需要注意的是，res.data！！！

另开窗口预览 pdf

前端处理 blob 实现预览 pdf 和下载 zip - 掘金 (juejin.cn)

pdf 全屏预览组件

import React from "react";
import { Icon, Spin } from "antd";
import styles from "./index.module.less";

export default React.memo(({ pdfUrl, closeModal, loading }) => {
  // 点击内容区域之外可关闭预览界面
  const clickOuter = () => {
    closeModal();
  };
  const antIcon = (
    <Icon type="loading" style={{ color: "#e6e6e6", fontSize: 24 }} spin />
  );

  return (
    <div className={styles["full-screen-container"]} onClick={clickOuter}>
      <div className={styles["top-bar"]}>
        <div className={styles["btn-exit"]} onClick={closeModal}>
          <Icon type="close" style={{ color: "#e6e6e6" }} />
        </div>
      </div>
      <div className={styles.content}>
        {loading ? (
          <Spin indicator={antIcon} />
        ) : (
          <iframe
            title="pdfWatch"
            src={pdfUrl}
            id="iframe"
            style={{ border: 0, width: "990px", height: "calc(90vh - 120px)" }}
          ></iframe>
        )}
      </div>
    </div>
  );
});

// index.module.less

.full-screen-container {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 1100px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  flex-direction: column;

  .content {
    // transition: all 300ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: auto;
    overflow: hidden;
  }

  .top-bar {
    height: 48px;
    // background-color: black;

    .btn-exit {
      position: fixed;
      top: 0;
      right: 10px;
      line-height: 48px;
      font-size: 20px;
      transform: scaleX(1.15);
      cursor: pointer;
      &:hover {
        color: #07f;
      }
    }
  }
}