如何在 React Js 中仅上传 PDF 文件和预览答案

【问题标题】：How to upload only PDF file and preview in react Js如何在 React Js 中仅上传 PDF 文件和预览
【发布时间】：2018-07-21 03:16:29
【问题描述】：

我正在 React js 中进行 pdf 上传。我想上传 pdf 文件，只想在上传按钮的顶部显示小 div 和删除按钮，如果我点击删除，那么它应该被删除。

我已经成功地为图像做了同样的事情。我可以上传图片，也可以预览。但我需要一些帮助来上传 pdf 文件

这是我的代码，

 this.state = {
      file: '',
      imagePreviewUrl: ''
    }

getPhoto (e) { e.preventDefault();

let reader = new FileReader();
let file = e.target.files[0];

reader.onloadend = () => {
  this.setState({
    file: file,
    imagePreviewUrl: reader.result
  });
}
  reader.readAsDataURL(file);
}

 render() {
  const { imagePreviewUrl, file } = this.state;
  let imagePreview = null;
     if (imagePreviewUrl) {
        imagePreview = (<img src={imagePreviewUrl} />);
      } else {
        imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
      }
return (
      <React.Fragment>
      <div className={styles.previewBlock}>
        {imagePreview}
        <div className={styles.fileName}>{file.name}<span>
        <i className="fa fa-times" /></span></div>
      </div>
  )
 }

【问题讨论】：

标签： reactjs pdf file-upload

【解决方案1】：

没有可以为您呈现 pdf 的 HTML 元素，但一种可能的解决方案是使用 Mozilla 的 pdf.js library，它可以将 pdf 页面呈现到 canvas 元素上。

【讨论】：

当将 pdf 注入

【解决方案2】：

您可以尝试使用react-pdf。我没有使用它，但在大纲演示中它呈现了一个 pdf 文件。希望对你有帮助！

【讨论】：

【解决方案3】：

我正在使用 react-pdf 渲染 PD，一旦渲染完成，将 canvas 转换为 blob url，然后可以显示为图像。

import React, { useRef, useState } from "react";
import { Document, Page } from "react-pdf/dist/esm/entry.webpack";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
const pdfSrc = "/pdfs/test.pdf";

export const PDFPreview = ({ preview = pdfSrc, setPreview }) => {
  const canvasRef = useRef(null);
  const [thumb, setThumb] = useState(null);
  if (thumb) return <img src={thumb} alt="pdf preview" className="rounded overflow-hidden" />;
  return (
    <>
      <Document file={preview}>
        <Page
          onRenderSuccess={() => {
            canvasRef?.current?.toBlob((blob) => setThumb(URL.createObjectURL(blob)));
          }}
          height={200}
          canvasRef={canvasRef}
          className="rounded overflow-hidden shadow-lg "
          renderTextLayer={false}
          pageNumber={1}
        />
      </Document>
    </>
  );
};

【讨论】：