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>
