- vue-PDF-App(功能完整内嵌组件):
- https://www.npmjs.com/package/vue-pdf-app
vue-PDF 使用 (参考地址):
https://www.jianshu.com/p/a640ce9d4882
vue-PDF 下载 (参考地址):
- https://www.jianshu.com/p/56680ce1cc97
- vue-PDF-demo(参考项目):
- ---------------------------------------------------------------------------(分割线)--------------------------------------------------------------------
1,PDF 预览, 分页实现
vue-PDF 组件排坑: 中文字体不显示
参考地址 (一): https://www.jianshu.com/p/1461d8e4ca62
参考地址 (二):
解决方案: 用一位大佬封装好的 vue-PDF-signature 替代 vue-PDF
代码如下:
- NPM install --save vue-PDF-signature
- <el-dialog
- title="pdf 预览"
- width="75%"
- >
- <div class="toolbar">
- <div class="toolbar_center">
- <div class="paging">
- <span>{{ currentPage }}</span>
- <span>/</span>
- <span>{{ numPages }}</span>
- </div>
- <span class="line" />
- <div class="zoom">
- <img src="../../static/image/reduce.png" alt="">
- <span>120%</span>
- <img src="../../static/image/plus.png" alt=""class="plus_img">
- </div>
- </div>
- <div class="toolbar_right">
- <!-- <div class="pdf_download" @click="handleDownfile(index)"> -->
- <div class="pdf_download">
- <img src="../../static/image/download.png" alt=""@click="downPdf()">
- <span > 下载 </span>
- </div>
- <el-button class="printing" @click.stop="print">
- <span class="el-icon-printer" />
- <span > 打印 </span>
- </el-button>
- </div>
- </div>
- <div class="dialog_content">
- <div class="dialog_content_pdf">
- <el-scrollbar style="height:800px">
- v-for="currentPage in numPages"
- id="pdf"
- ref="pdf"
- :src="pdfSrc"
- :page="currentPage"
- class="pdf"
- @num-pages="pageNum = $event"
- @progress="loadedRatio = $event"
- @loaded="loadPdfHandler = $event"
- />
- </el-scrollbar>
- </div>
- <div class="dialog_content_tablbar" />
- </div>
- </el-dialog>
- import PDF from 'vue-pdf-signature'
- import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'
- export default {
- compoents: {
- },
- data() {
- return {
- pdfSrc: '', // PDF 绑定的 url 链接
- numPages: null, // 循环的 PDF 总页数
- pageNum: 4, // PDF 总页数
- }
- },
- methods: {
- seePdf(index) {
- this.dialogVisible = true
- this.$http.queryRegionlist('', this.filterDateTime, this.region, this.filterDateTime).then(res => {
- this.currentPage = res.data.current
- this.pdfSrc = PDF.createLoadingTask({ // 接口中的 url 用 createLoadingTask 方法
- url: res.data.records[index].url,
- cMapPacked: true,
- CMapReaderFactory
- })
- // 计算总页数实现分页展示多页
- this.pdfSrc.promise
- .then(PDF => {
- this.numPages = PDF.numPages
- })
- .catch(err => {
- console.error('pdf 加载失败', err)
- })
- })
- },
- }
- }
2,PDF 下载功能实现
后端返回的 PDF 为文件流形式, 下载方式有三种方式:
- 2.1,Windows.open(url)
- downPdf() {
- Windows.open( url ) // url 代表接口中后端给的 PDF 的 url
- }
2.2,html5 中 a 标签的 download 属性实现下载, download.JS 已经封装好直接用.
- import download from 'downloadjs' // 引入 download.JS
- // 下载 PDF
- downPdf() {
- this.$http.downloadFile(this.ids).then(data => {
- download(data)
- })
- }
2.3, 使用 html2canvas 和 jspdf 插件实现
2.3.1 下载安装模块
NPM install html2canvas jspdf --save
2.3.2 定义功能实现方法 undefined
在项目工具方法存放文件夹 utils 中创建 htmlToPdf.JS 文件, 代码如下:
- // 导出页面为 PDF 格式
- import html2Canvas from 'html2canvas'
- import JsPDF from 'jspdf'
- export default{
- install (Vue, options) {
- Vue.prototype.getPdf = function () {
- var title = this.htmlTitle
- html2Canvas(document.querySelector('#pdfDom'), {
- allowTaint: true
- }).then(function (canvas) {
- let contentWidth = canvas.width
- let contentHeight = canvas.height
- let pageHeight = contentWidth / 592.28 * 841.89
- let leftHeight = contentHeight
- let position = 0
- let imgWidth = 595.28
- let imgHeight = 592.28 / contentWidth * contentHeight
- let pageData = canvas.toDataURL('image/jpeg', 1.0)
- let PDF = new JsPDF('','pt','a4')
- if (leftHeight <pageHeight) {
- PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
- } else {
- while (leftHeight> 0) {
- PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
- leftHeight -= pageHeight
- position -= 841.89
- if (leftHeight> 0) {
- PDF.addPage()
- }
- }
- }
- PDF.save(title + '.pdf')
- }
- )
- }
- }
- }
2.3.3 全局引入实现方法
在项目主文件 main.JS 中引入定义好的实现方法, 并注册
- import htmlToPdf from '@/components/utils/htmlToPdf'
- // 使用 Vue.use() 方法就会调用工具方法中的 install 方法
- Vue.use(htmlToPdf)
2.3.4 在相关要导出的页面中, 点击时调用绑定在 Vue 原型上的 getPdf 方法, 传入 id 即可
- //HTML
- <div id="pdfDom">
- <!-- 要下载的 HTML 页面, 页面是由后台返回 -->
- <div v-HTML="pageData"></div>
- </div>
- <el-button type="primary" size="small" @click="getPdf('#pdfDom')"> 点击下载 </el-button>
- //JS
- export default {
- data () {
- return {
- htmlTitle: '页面导出 PDF 文件名'
- }
- }
- }
3,PDF 打印功能实现
在 vue-PDF 组件上绑定 ref 属性, 再到方法中使用 $refs 获取 DOM 文本, 调用原型方法 print()
- // 打印
- print() {
- console.log(this.$refs.PDF) // 这儿的 console.log 仅用于测试打印出多个结果
- this.$refs.PDF.print()
- },
来源: https://www.qcloud.com/developer/article/1864231