title: How to embed PDF into part of an html page for Firefox
body: <p>When I use iframe to embed a pdf into an html page, the pdf embeds properly when viewed in Chrome:
  <a href="https://i.stack.imgur.com/LDpmR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LDpmR.png" alt="an embedded pdf in chrome browser"></a></p>
  
  <p>But in Firefox, the pdf opens in its own window instead of the same view as Chrome:
  <a href="https://i.stack.imgur.com/yxs1M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yxs1M.png" alt="firefox opens pdf in browser everytime"></a></p>
  
  <p>I've tried a few permutations of settings in iFrame. Here's the code I'm using for this now in ReactJS</p>
  
  <pre><code>  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 (
        &lt;div className="container-fluid h-100p"&gt;
        &lt;header style={{margin:'50px'}}&gt;&lt;/header&gt;
                  &lt;div className="row justify-content-center bg-white" style={{height:'inherit'}}&gt;
                      &lt;div className="col-sm-6"&gt;
              &lt;div&gt;&lt;h1&gt;PDF Generator Test&lt;/h1&gt;&lt;/div&gt;
              &lt;div&gt;BUTTON&lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="col-sm-6"&gt;
              &lt;div&gt;
                &lt;object&gt;
                  &lt;iframe id="pdf-test" allowfullscreen="false" windowName="PDF Test" src={this.state.lesson} style={{float:"none", display:"inline", height:"1200px"}} frameborder="0"&gt;&lt;/iframe&gt;
                &lt;/object&gt;
              &lt;/div&gt;
            &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>I tried wrapping in an object tag from <a href="https://stackoverflow.com/questions/19654577/html-embedded-pdf-iframe">HTML embedded PDF iframe</a> but to no avail.</p>
  
  <p>Thank you!</p>