pdfjs用于react项目

1.下载
官网地址
2.解压包放到react项目中

image.png

3.屏蔽跨域错误，允许跨域

image.png

4.从后端获取blob形式pdf文件

const blobs = []
let num = 0;
for (let i = 0; i < Math.ceil(this.props.currData.size / pieceSize); i++) {
    // 切片获取文件
    downloadSlice({
        objectName: this.props.currData.objectName,
        range: (i === 0 ? 0 : Math.floor((i * pieceSize + 1))) + '-' + ((i + 1) * pieceSize >= this.props.currData.size ? (this.props.currData.size - 1) : Math.floor((i + 1) * pieceSize))
        // eslint-disable-next-line no-loop-func
    }).then(res => {
        res.blob().then(blob => {
            num++;
            blobs[i] = blob;
            if (num === Math.ceil(this.props.currData.size / pieceSize)) {
                const file = new Blob(blobs)
                if (file.size === 0) {
                    this.setState({
                        result: {
                            isSuccess: false,
                            msg: '获取文件失败'
                        }
                    })
                } else {
                    const pdf = URL.createObjectURL(file)
                    this.setState({
                        pdfurl: 'web/viewer.html?file=' + pdf
                    })
                }
            }
        })

    })
}

5.将blob文件资源地址添加到iframe中

 <iframe title='pdf' src={this.state.pdfurl}></iframe>

参考