Reactjs 尝试使用jsPDF将React DOM保存为PDF时出错

我试图在页面上呈现数据，但我希望能够将页面上显示的内容保存为PDF格式。我四处寻找，发现了jsPDF，并试图实现它，但不确定哪里出了问题。我想找个人帮忙

  import React from 'react'
  import ReactDOMServer from 'react-dom/server'
  import { Mutation, Query } from "react-apollo";
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import { Grid, Button, Image } from 'semantic-ui-react'
  import { DragDropContext, Droppable, Draggable } from 'react- beautiful-dnd'
  import { FlexyFlipCard } from 'flexy-flipcards'
  import jsPDF from 'jspdf'


  import Graphs from './Graphs.jsx'


  const getItems = (count, array) =>
    Array.from({ length: count }, (v, index) => index).map(index => ({
      id: `item-${index}`,
      content: array[index].map((activity) => { return (  
        <div>
          <div>  
            <div style={{float: 'right'}}>{activity.name}</div><br/>
            <div style={{float: 'right'}}>{activity.cost === null || 0 ? 'Free' : activity.cost === 1 ? '$' : activity.cost === 2 ? '$$' : activity.cost === 3 ? '$$$' : activity.cost === 4 ? '$$$$' : null}</div>
            <Image style={{width: '50px', height: '50px'}} src={activity.image}></Image>
          </div> <br/>
        </div>
      )})
    }));

  // a little function to help us with reordering the result
  const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  const grid = 45;

  const getItemStyle = (isDragging, draggableStyle) => ({
    // some basic styles to make the items look a bit nicer
    userSelect: 'none',
    padding: '10px',
    margin: 0,

    // change background colour if dragging
    background: isDragging ? 'lightgreen' : 'white',

    // styles we need to apply on draggables
    ...draggableStyle,
  });

  const getListStyle = isDraggingOver => ({
    background: isDraggingOver ? 'white' : 'white',
    display: 'flex',
    padding: grid,
    overflow: 'auto',
  });

  class Kamban extends React.Component {
    constructor (props) {
      super (props)
      this.state = {
        items: getItems(this.props.days.length, this.props.days),
        open: false
      }
      this.onDragEnd = this.onDragEnd.bind(this)
    }

    onDragEnd(result) {
      // dropped outside the list
      if (!result.destination) {
        return;
      }

      const items = reorder(
        this.state.items,
        result.source.index,
        result.destination.index
      );

      this.setState({
        items,
      });
    }

    savePDF () {
      const doc = new jsPDF()
      doc.fromHTML(ReactDOMServer.renderToStaticMarkup(<Kamban />), 10, 10, {'width': 180})
      doc.save('text.pdf')
    }


    render () {
      return (
        <div>
          <Grid style={{display: 'inline-block'}}>
            <DragDropContext onDragEnd={this.onDragEnd}>
              <Droppable droppableId="droppable" type="app" direction="horizontal">
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    style={getListStyle(snapshot.isDraggingOver)}
                    {...provided.droppableProps}
                  >
                    {this.state.items.map((item, index) => (
                      <div  style={{border: '2px solid gray', height: '700px', width: '300px', marginRight: '10px', float: 'right'}}>
                        <div>
                          {`${index + 50} degrees`}
                        </div>
                        <br/>


                        <Draggable key={item.id} draggableId={item.id} index={index}>
                          {(provided, snapshot) => (
                            <div
                              ref={provided.innerRef}
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                              style={getItemStyle(
                                snapshot.isDragging,
                                provided.draggableProps.style
                              )}
                            >
                            <FlexyFlipCard
                                frontBackgroundColor="white"
                                backBackgroundColor="white"
                            >
                                <div >
                                  <div>{item.content}</div>
                                  <Button ref='flipper'>STATS</Button>
                                </div>
                                <div>
                                  {/* <Graphs></Graphs> */}
                                  <Button ref='flipper'>TRIP</Button>
                                </div>
                            </FlexyFlipCard>
                            </div>
                          )}
                        </Draggable>
                      </div>
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </DragDropContext>   
          </Grid>
          <Button onClick = {() => this.savePDF()}>Save</Button>
        </div>
      )
    }
  }


  export default Kamban

从“React”导入React
从“react dom/server”导入ReactDOMServer
从“react apollo”导入{Mutation，Query}；
从'apollo cache inmemory'导入{InMemoryCache}；
从“语义ui反应”导入{网格、按钮、图像}
从'react-Beauty dnd'导入{DragDropContext，Dropable，Draggable}
从“flexy flipcards”导入{FlexyFlipCard}
从“jsPDF”导入jsPDF
从“./Graphs.jsx”导入图形
常量getItems=（计数，数组）=>
从（{length:count}，（v，index）=>index）.map（index=>({
id:`item-${index}`，
内容：数组[index].map（（活动）=>{return（
{activity.name}

{activity.cost==null | | 0？'Free'：activity.cost==1？'$'：activity.cost==2？'$$'：activity.cost==3？'$$$'：activity.cost==4？'$$$$'：null}


)})
}));
//一个帮助我们重新排序结果的小函数
常量重新排序=（列表、开始索引、结束索引）=>{
const result=Array.from（列表）；
常数[移除]=结果拼接（起始索引，1）；
结果：拼接（末端索引，0，移除）；
返回结果；
};
常数网格=45；
const getItemStyle=（isDragging，DragableStyle）=>({
//一些基本样式可以使物品看起来更漂亮一些
用户选择：“无”，
填充：“10px”，
保证金：0，
//如果拖动，请更改背景颜色
背景：IsDraging？“浅绿色”：“白色”，
//我们需要在拖拽表上应用的样式
…拖拉风格，
});
const getListStyle=IsDragingOver=>({
背景：IsDragingOver？“白色”：“白色”，
显示：“flex”，
填充：网格，
溢出：“自动”，
});
类Kamban扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
items:getItems（this.props.days.length，this.props.days），
开放：假
}
this.onDragEnd=this.onDragEnd.bind（this）
}
昂德拉根（结果）{
//被排除在名单之外
如果（！result.destination）{
返回；
}
常量项=重新排序(
此.state.items，
result.source.index，
result.destination.index
);
这是我的国家({
项目，
});
}
savePDF（）{
const doc=new jsPDF（）
fromHTML（ReactDOMServer.renderToStaticMarkup（），10,10，{'width'：180}）
doc.save（'text.pdf'）
}
渲染（）{
返回(
{（已提供，快照）=>(
{this.state.items.map（（项，索引）=>(
{${index+50}度`}


{（已提供，快照）=>(
{item.content}
统计数据
{/*  */}
旅行
)}
))}
{提供的.占位符}
)}
这个.savePDF（）}>Save
)
}
}
导出默认卡班

---

函数在类中，调用它的按钮靠近底部

请为我们解释清楚；当你说“不知道我哪里出了问题”——到底出了什么问题？控制台、白色屏幕等中是否有错误？我得到了未捕获的错误：抛出了一个跨原点错误。React无法访问开发中的实际错误对象。和Kamban.jsx？01f3:63未捕获类型错误：无法读取未定义的属性“长度”。引用CORS（交叉原点）的错误与React完全无关。有关CORS的说明，请阅读此处：。