Próbuję otworzyć PDF w nowej karcie w reakcji JS. Kod jest podłączony poniżej. Problem, który mam, polega na tym, że mój plik PDF ma swoją nazwę zmienioną w nowej karcie. Nagłówek zakładki staje się sampe.e72672.pdf. Ja tylko robię próbkę? Również jak zdefiniować twardy kod URL dla nowej karty?

import React from "react";
import Resume from "../static/sample.pdf";

  return (
    <div className="MainLandingContainer">
      <div className="ResumeContainer">
        <Button variant="primary" target="_blank" href={Resume}>
          Resume
        </Button>
      </div>
    </div>
  );
}

export default Landing;
1
vishalkohli 12 kwiecień 2020, 02:20

1 odpowiedź

Najlepsza odpowiedź

Myślę, że nie możemy zmienić baseURL okna bez przeładowania do nowego adresu URL. Ale możemy zmienić ścieżkę za pomocą history.pushState. Oto rozwiązanie, które pracuje w Mozilli i Chrome.

import React from "react";
import Resume from "./Sample.pdf";

const Landing = () => {
  const openPDF = () => {
    const pdfWindow = window.open("test");
    const title     = "My PDF";
    const URI       = "test/test";
    const html      = `
      <html>
        <head>
          <title>${title}</title>
        </head>
        <body style="margin:0">
          <embed width="100%" height="100%" src=${Resume} type="application/pdf">
        </body>
      </html>
    `;

    pdfWindow.document.write(html);
    pdfWindow.document.close();
    pdfWindow.history.pushState(null, null, URI);
  };

  return (
    <div className="MainLandingContainer">
      <div className="ResumeContainer">
        <button variant="primary" target="_blank" onClick={openPDF}>
          Resume
        </button>
      </div>
    </div>
  );
};

export default Landing;

Możesz znaleźć Codesandbox Oto

2
Niyas Nazar 13 kwiecień 2020, 13:49