Git Product home page Git Product logo

Comments (6)

biyunwu avatar biyunwu commented on May 18, 2024 1

Loading a PDF from react-pdf worked this way, could anyone help me out with this?

I'm getting a PDFDocument: stream must have data error whenever I try to load my PDF's

<PDF
          file={`data:application/pdf;base64,${this.state.base64}`}
          onDocumentComplete={this.onDocumentComplete}
          onPageComplete={this.onPageComplete}
          page={this.state.page}
/>

Basically, react-pdf-js supports base 64 string. Different from react-pdf, it is not required to separate the data type data:application/pdf;base64 from the date string in this library. Here is an example, and it works to me.

// data.js
const pdf = `data:application/pdf;base64,JVBERi0xLjYNJeLjz9MNCjEyNCAw...`
export const getData = () => JSON.stringify(pdf)

// PdfViewer.jsx
import * as Data from '../data/pdf'
export default class PdfViewer extends React.Component {
...
render() {
        return (
        <div>
            <PDF
                file={JSON.parse(Data.getData())}
                onDocumentComplete={this.onDocumentComplete}
                page={this.state.page}
            />
            {pagination}
        </div>
        )
    }
}

from react-pdf-js.

yadavpeoplelink avatar yadavpeoplelink commented on May 18, 2024

Any Updates on the mentioned issue?

from react-pdf-js.

yaseerjaffar avatar yaseerjaffar commented on May 18, 2024

Any update on this?
I am facing this issue.

from react-pdf-js.

Johnogram avatar Johnogram commented on May 18, 2024

Another solution would be to turn the base64 string into a blob, then attach the blob to window.URL.createObjectURL, which in turn can be passed to the file prop:

const raw = window.atob(base64);
const rawLength = raw.length;
const blobArray = new Uint8Array(new ArrayBuffer(rawLength));

for (let i = 0; i < rawLength; i++) {
    blobArray[i] = raw.charCodeAt(i);
}

const blob = new Blob([blobArray], {type: 'application/pdf'});

Then

window.URL.createObjectURL(blob)

from react-pdf-js.

mikecousins avatar mikecousins commented on May 18, 2024

Seems like this one might be working? Let me know if it's not.

from react-pdf-js.

mcviswanadha avatar mcviswanadha commented on May 18, 2024

this approach is not working in iphone safari

from react-pdf-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.