0

我正在尝试在 React 中渲染 base64pdf，但在部署时出现此错误。

Refused to connect to 'data:application/pdf;base64,JVB....' because it violates the following Content Security Policy directive: "connect-src 'self' https://www.google.com/inputtools/request https://dpm.demdex.net/

base64 没有从任何地方拉出来，我已经用 npm 安装了 pdfjs-dist。有没有办法在不更改任何内容安全策略的情况下解决这个问题？谢谢！

import pdfjs from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
...
export const PDFViewer: FC<Props> = ({ base64 = "" }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);
  const renderPdf = useCallback(async () => {
    const loadingTask = pdfjs.getDocument(base64);

    try {
      const loadedPdf = await loadingTask.promise;
      const pdfPage = await loadedPdf.getPage(1);
      const viewport = pdfPage.getViewport({ scale: 1.5 });
      const canvas = canvasRef.current;

      if (canvas) {
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: canvas.getContext("2d") as CanvasRenderingContext2D,
          viewport: viewport
        };

        setLoading(false);
        pdfPage.render(renderContext);
      }
    } catch (e) {
      setLoading(false);
      setError(true);
    }
  }, [base64]);

  useEffect(() => {
    renderPdf();
  }, [base64]);

  const hasLoadOrError = loading || error;

  return (
    <div className="pdf-viewer">
      {loading && <Spinner className="spinner" />}
      {error && <PDFIcon data-testid="pdf-icon" />}
      <div
        data-testid="pdf-container"
        className={hasLoadOrError ? "hide" : "show"}
      >
        <canvas height="0" width="0" ref={canvasRef} />
      </div>
    </div>
  );
};
4

0 回答 0