如何将PDF嵌入Firefox的html页面的一部分

时间:2019-02-27 00:24:29

标签: javascript html reactjs pdf firefox

当我使用iframe将pdf嵌入html页面时,在Chrome中查看时,该pdf会正确嵌入: an embedded pdf in chrome browser

但是在Firefox中,pdf在其自己的窗口中打开,而不是与Chrome相同的视图: firefox opens pdf in browser everytime

我尝试了iFrame中的一些设置变更。这是我现在在ReactJS中使用的代码

  componentDidMount() {
    const doc = new jsPDF('p', 'pt', 'letter')

    const data = {
      title: 'lesson title',
    }

    doc.setFontSize(10);
    doc.text(50, 50, `${data.title}`)
    doc.text(50, 50 + (14 * 1), 'Subtitle')
    doc.text(50, 50 + (14 * 2), 'Required: these things...')
    doc.text(50, 50 + (14 * 3), (new Date()).toLocaleDateString())
    doc.text(50, 50 + (14 * 7), 'This PDF presents the form you just submitted')

    this.setState({
      lesson: doc.output('dataurl', null)
    })
  }


    render() {
        return (
      <div className="container-fluid h-100p">
      <header style={{margin:'50px'}}></header>
                <div className="row justify-content-center bg-white" style={{height:'inherit'}}>
                    <div className="col-sm-6">
            <div><h1>PDF Generator Test</h1></div>
            <div>BUTTON</div>
          </div>
          <div className="col-sm-6">
            <div>
              <object>
                <iframe id="pdf-test" allowfullscreen="false" windowName="PDF Test" src={this.state.lesson} style={{float:"none", display:"inline", height:"1200px"}} frameborder="0"></iframe>
              </object>
            </div>
          </div>
                </div>
            </div>
        )
    }
}

我尝试将HTML embedded PDF iframe中的对象标签包装起来,但无济于事。

谢谢!

0 个答案:

没有答案