从 HTML 文本 React 创建 PDF 文件 [英] Create PDF file from HTML text React

问题描述

我是 react-redux 的初学者.

我尝试创建一个函数，例如使用 Javascript 将 html 文本导出为 pdf 并且它适用于 html，但是当我将其应用于 react 组件时，它不起作用.

这是我的代码:

从'react'导入React；类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.pdfToHTML=this.pdfToHTML.bind(this);}pdfToHTML(){var pdf = new jsPDF('p', 'pt', 'letter');var source = $('#HTMLtoPDF')[0];var specialElementHandlers = {'#bypassme':函数(元素，渲染器){返回真}};变量边距 = {顶部:50，左:60，宽度:545};pdf.fromHTML (source//HTML 字符串或 DOM elem ref., margins.left//x 坐标, margins.top//y 坐标, {'width': margins.width//PDF 内容的最大宽度, 'elementHandlers': specialElementHandlers},功能(处置){//处置:最后一行的 X、Y 的对象添加到 PDF//这允许在 html 之后插入新行pdf.save('html2pdf.pdf');})}使成为() {返回 (<div><div classID="HTMLtoPDF"><中心><h2>HTML 转 PDF</h2><p>Lorem ipsum dolor sat amet, consectetur adipisicing </p></中心>

<button onClick={this.pdfToHTML}>下载PDF</button>

);}}导出默认应用程序；

Javascript 与 HTML:https://www.youtube.com/watch?v=HVuHr-Q7HEs

解决方案

React 在 html 标签中没有 "classID" 属性，它作为道具传递给 div，永远不会被解析.className 仅被实现，因为它是 JS 中的保留字，可能您只需要将classID"替换为id"属性，它就会起作用

附言当您需要的只是 DOM 操作时，JQuery 是不好的做法.javascript 有 document.getElementById() 并且不需要依赖

P.p.s.给你的小提示是pdfToHTML(){}"可以替换为 lambda 为pdfToHTML = () => {}"，你的函数将从类实例中获得this"，绑定将被删除，构造函数将变得无用.

I am beginner in react-redux.

I trying create a function like exporting a html text to pdf with Javascript and it works with html, but when I apply it to react component, it doesn't work.

This is my code:

import React from 'react';

class App extends React.Component {
  constructor(props){
    super(props);
    this.pdfToHTML=this.pdfToHTML.bind(this);
  }

  pdfToHTML(){
    var pdf = new jsPDF('p', 'pt', 'letter');
    var source = $('#HTMLtoPDF')[0];
    var specialElementHandlers = {
      '#bypassme': function(element, renderer) {
        return true
      }
    };

    var margins = {
      top: 50,
      left: 60,
      width: 545
    };

    pdf.fromHTML (
      source // HTML string or DOM elem ref.
      , margins.left // x coord
      , margins.top // y coord
      , {
          'width': margins.width // max width of content on PDF
          , 'elementHandlers': specialElementHandlers
        },
      function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF
        // this allow the insertion of new lines after html
        pdf.save('html2pdf.pdf');
      }
    )
  }

  render() {
    return (
      <div>
        <div classID="HTMLtoPDF">
          <center>
            <h2>HTML to PDF</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
          </center>
        </div>
        <button onClick={this.pdfToHTML}>Download PDF</button>
      </div>
    );
  } 
}

export default App;

Javascript with HTML: https://www.youtube.com/watch?v=HVuHr-Q7HEs

解决方案

React don't have "classID" property in html tags, it's passed to div as props, which will never be resolved. className was only implemented because it's reserved word in JS, perhabs you need to replace your "classID" by only "id" property and it will work

P.s. JQuery is bad practice when all what you need is DOM manipulation. javascript have document.getElementById() and dependency is not needed

P.p.s. small tip for you is "pdfToHTML(){}" can be replaced to lambda as "pdfToHTML = () => {}", and your function will have "this" from class instance, binding will be removed and constructor will become useless.

这篇关于从 HTML 文本 React 创建 PDF 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！