Home>

I want to display pdf from url using react-pdf

This sandboxIndex.jsx
I changed it a little, but
Failed to load PDF file.
And cannot be read

import React from "react";
import ReactDOM from "react-dom";
import {pdfjs, Document, Page} from "react-pdf";
import "./styles.css";
import samplePDF from "../sample.pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `// cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
function Test () {
  return (
  <Document
      file = {
        "https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf"
      }
    >
    <Page pageNumber = {1} />
  </Document>
  );
}
ReactDOM.render (<Test />, document.getElementById ("app"));
What I tried

I changed the Document to the following, but it didn't work.

<Document
      file = {{
       url: "https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf"
      }}
    >
  • Answer # 1

    There is a possibility of a CORS error.
    Roughly speaking, it is an error that resources can be shared by request only between the same domain, that is, the same service.

    https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors

    If you want to display the requested pdf on the server, you can set up the server yourself, place the pdf there, and allow the request from your application by setting Access-Control-Allow-Origin. I think.