接着在组件里就可以直接使用了，
iframe的原理是将一个html页面嵌入在另一个html页面中
<iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe>
vue组件中：
<iframe ref="pdfCotainer" :src="pdfUrl" width="100%"></iframe>
首先通过axios调用后台接口获取流数据
export function getStream(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
responseType: 'arraybuffer'
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
流转成二进制文件方法
pdfPreview(year) {
let param = {
types: this.types,
year: this.year
console.log('传递的参数为', param)
getDatareportData(param).then(res => {
console.log('调用生成数据报告接口返回数据', res)
const binaryData = [];
binaryData.push(res);
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
但是这样iframe的高度始终是固定的，需要再动态改变一下高度
changeFrameHeight() {
let pdfCotainer = this.$refs.pdfCotainer;
pdfCotainer.height = document.documentElement.clientHeight;
预览时候如果想隐藏工具栏有两种方式：
1、使用pdfobject.js插件设置参数
<!DOCTYPE html>
<meta charset="utf-8">
<head> </head>
<style type="text/css">
#toolbarViewerRight {
display: none;
html,
body,
#pdf_viewer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: red;
.gray-bg{
</style>
<body class="gray-bg">
<div id="pdf_viewer"></div>
<div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.6/pdfobject.js"></script>
<script type="text/javascript">
if (PDFObject
.supportsPDFs) {
var options = {
pdfOpenParams: {
scrollbars: '0',
toolbar: '0',
statusbar: '0',
view: 'FitH',
pagemode: 'none',
search: 'lorem ipsum',
PDFObject.embed("test.pdf", "#pdf_viewer", options);
} else {
alert("浏览器不支持");
</script>
</body>
</html>
2、地址中添加参数信息
?download=0，只预览不下载，默认是下载
#page=pagenum， 设置滚动到 pdf 第几页
#zoom=scale，设置缩放比例，缩放值为100表示缩放值为100%
#view=Fit，设置显示区域为适合页面大小
#view=FitH，宽度撑满浏览器窗口，高度自适应
#view=FitV，宽度自适应
#toolbar=1 | 0，打开或关闭工具栏
this.pdfUrl = this.pdfurl + '?download=0#toolbar=0&view=FitH'
另：滚动条隐藏的方式没找到，html5中把iframe的scrolling属性给取消了，用css也没能实现
打开新浏览器窗口预览文件，窗口置顶
window.open(this.pdfurl + '?download=0#toolbar=0', '_blank', 'alwaysRaised=yes')
二、导出下载pdf
axios获取到数据，将流转为二进制文件，创建一个a标签，将链接嵌入到a标签的href属性中，将a标签添加到页面上，点击链接下载
exportReport() {
console.log('点击了导出报告', this.filename)
ExportDatareport().then(res => {
console.log('调用导出pdf接口返回', res)
const binaryData = [];
binaryData.push(res);
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, {type: `application/pdf`}))
const link = document.createElement('a')
link.href = this.pdfUrl
link.setAttribute('download', this.filename)
document.body.appendChild(link)
link.click()
excel
let excelUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/vnd.ms-excel'}))
日拱一卒无有尽，功不唐捐终入海
粉丝
