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>
