реагировать на PDF между двумя компонентами - PullRequest
Новая
       11

реагировать на PDF между двумя компонентами

0 голосов
/ 12 января 2020

Так что я использую реагирование на pdf для печати Html тегов в PDF, кнопка находится на одном компоненте, а текст на другом, у меня нет особых знаний о том, как сделать индекс для печати кнопки . js в формате pdf. Я почти уверен, что что-то не так в ссылке и импортирует кнопку

. js

import React, { Component } from "react";

import Pdf from "react-to-pdf";
const ref = React.createRef();
class Button extends Component {
  render() {
    return (
      <React.Fragment>
        <Pdf targetRef={ref} filename="code-example.pdf">
          {({ toPdf }) => <button onClick={toPdf}>Generate Pdf</button>}
        </Pdf>
      </React.Fragment>
    );
  }
}

export default Button;

index. js

import React, { Component } from "react";
import "./styles.css";
import Button from "./button";
const ref = React.createRef();
class Index extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="App">
          <div ref={ref}>
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Index;

ReactDOM.render(<Button />, document.getElementById("top"));
const rootElement = document.getElementById("root");
ReactDOM.render(<Index />, rootElement);

Ответы [ 2 ]

0 голосов
/ 12 января 2020

Вы можете выставить реквизит с помощью кнопки, чтобы передать ссылку на компонент, который вы хотите сохранить в PDF. Вот демонстрация кнопки PDF с targetRef и fileName реквизитами.

PDFButton.jsx 

import React from "react";
import PropTypes from "prop-types";
import Pdf from "react-to-pdf";

// expose a targetRef prop and filename
const PDFButton = ({ children, filename, targetRef }) => (
  <Pdf targetRef={targetRef} filename={filename}>
    {({ toPdf }) => <button onClick={toPdf}>{children}</button>}
  </Pdf>
);

PDFButton.propTypes = {
  filename: PropTypes.string,
  targetRef: PropTypes.any
};

PDFButton.defaultProps = {
  filename: "code-example.pdf"
};

export default PDFButton;

Приложение. js

import React, { createRef } from "react";
import PDFButton from "./PDFButton";
import "./styles.css";

export default function App() {
  const pdfRef = createRef(); // create a single ref to pass to button
  return (
    <div ref={pdfRef} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <p>This is a demo how to create a save to PDF button</p>
      <PDFButton
        fileName="awesomePDFButtonDemo.pdf"
        targetRef={pdfRef}
      >
        Save to PDF!
      </PDFButton>
    </div>
  );
}

Edit PDFButton Demo

0 голосов
/ 12 января 2020

Используйте вот так: 

import React from "react";
import ReactDOM from "react-dom";
import Pdf from "react-to-pdf";

const Button = React.forwardRef((props, ref) => {
  return (
    <React.Fragment>
      <Pdf targetRef={ref} filename="code-example.pdf">
        {({ toPdf }) => <button onClick={toPdf}>Generate Pdf</button>}
      </Pdf>
    </React.Fragment>
  );
});

const App = () => {
  let docToPrint = React.createRef();

  return (
    <div>
      <div>
        <Button ref={docToPrint} />
      </div>
      <React.Fragment>
        <div className="App">
          <div
            ref={docToPrint}
            style={{
              borderRadius: "5px",
              width: "600px",
              height: "400px",
              margin: "0 auto",
              padding: "10mm"
            }}
          >
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
          </div>
        </div>
      </React.Fragment>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вывод ответа: ЗДЕСЬ

...