装置插件
npm install vue-pdf
yarn add vue-pdf
文档链接:https://github.com/FranckFrei…
间接应用插件的打印,会呈现乱码,须要批改 node_modules 源码
具体代码的批改参照下方文档链接
文档链接:https://github.com/FranckFrei…
一、申请后端,后端返回文档流的模式:
预览
预览款式(以多页为例)
html
// 其余代码省略...
<div class="max-height">
// 多页(蕴含只有一页的状况)<pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" style="width: 100%" ref="waybillRef"></pdf>
// 单页(打乱原有布局,组件放在这里是为了演示不便)<pdf :src="codeSrc" ref="codeRef"></pdf>
</div>
script
import pdf from 'vue-pdf';
import {getPDF} from '@/assets/scripts/utils'; // 须要申请的后盾 PDF 文档流接口
/**
* getPDF 阐明:* 后端有多个不同的 pdf 接口,前端依据 url 管制,将后端文档流和文件名称,用 Promise 的形式返回
* 其余代码略...
* axios
.get(url, { responseType: 'blob'})
.then((response) => {
let fileName = decodeURIComponent(response.headers['content-disposition'].replace(/.+filename=(.+)/g,
'$1'
)
)
resolve({data: response.data, name: fileName})
})
.catch((error) => {reject(error)
})
*
**/
export default {components: { pdf},
data() {
return {
pdfSrc: '',
codeSrc: '',
numPages: null,
}
},
methods: {
// 进入页面就申请后端接口用于预览
getPageData() {
// 其余代码省略...
getPDF(url).then(res => {
let blob = window.URL.createObjectURL(new Blob([res.data], {type: 'application/pdf;charset=UTF-8',})
);
this.pdfSrc = pdf.createLoadingTask(blob);
this.pdfSrc.promise.then(pdf => {this.numPages = pdf.numPages})
})
}
}
}
打印
print(ref) {if (ref==='waybillRef') {
// 多页是循环来的,ref 是数组,须要加上下标
this.$refs[ref][0].print();} else {this.$refs[ref].print();}
},
多页的写法 – 打印多页的款式(临时 bug 未解决,见下图)
多页的写法 – 打印单页的款式
单页的写法 – 打印单页的款式
下载
script
import {downloadPDF} from '@/assets/scripts/utils';
/**
* downloadPDF 阐明:* 下载 PDF 文件流 --> 通过 url 先调用前文的 getPDF--> 前端做下载
* 其余代码略...
* getPDF(url).then(res => {
let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/pdf;charset=UTF-8',})
);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.download = res.name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
*
**/
method: {download() {downloadPDF(url);
},
}
下载后的后果
二、申请 OSS, 返回 url 的模式:
【页面阐明】(其中下载就是前述【下载后的后果】局部)
预览
性能:点击 PDF 文件的放大 icon,弹出预览弹窗
html
// 其余代码省略...
<div class="max-height">
// 因为这里的页面的 pdf 页数不确定,故应用多页
<pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" style="width: 100%></pdf>
</div>
script
// 其余代码省略...
import pdf from 'vue-pdf';
export default {components: { pdf},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
numPages: null,
}
},
methods: {
// 点击放大
handlePreview(file) {this.dialogImageUrl = pdf.createLoadingTask(file.url);
this.dialogImageUrl.promise.then(pdf => {this.numPages = pdf.numPages // 这里拿到以后 pdf 总页数})
this.dialogVisible = true;
}
}
}
预览款式(以多页为例)