vue导出pdf

最新推荐文章于 2024-06-26 16:17:30 发布

汪小敏同学

最新推荐文章于 2024-06-26 16:17:30 发布

阅读量1k

点赞数

分类专栏： vue基础知识总结文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_44692055/article/details/122085224

版权

vue基础知识总结专栏收录该内容

70 篇文章 5 订阅

订阅专栏

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save


2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')

// 导出页面为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')
      }
      )
    }
  }
}

3、在main.js中使用我们定义的函数文件。
import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、在需要的导出的页面..调用我们的getPdf方法即可.
<template>
  <div class="home">
  
<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
	 <div id="exportPdf" ref="exportPdf" >
        <table border="1" class="table_style">
          <thead>
            <th colspan="8" style="font-size: 30px">
              尚特杰-无人机智能巡检诊断系统<br />
              配置及报价单
            </th>
          </thead>
          <tbody>
            <tr  >
              <!-- <td rowspan="3">申请人</td> -->
              <td colspan="2" >询价单位</td>
              <td colspan="2">德瑞智能科技有限公司</td>
              <td colspan="2">报价单位（盖章）</td>
              <td colspan="2">尚特杰电力科技有限公司</td>
            </tr>
            <tr>
              <td colspan="2">询价人</td>
              <td colspan="2">赵淑美</td>
              <td colspan="2">报价人</td>
              <td colspan="2">肖成</td>
            </tr>
            <tr>
              <td colspan="2">联系方式</td>
              <td colspan="2">xxxx</td>
              <td colspan="2">15838231263</td>
              <td colspan="2">xxxx</td>
            </tr>
            <tr>
              <td colspan="2">邮箱</td>
              <td colspan="2">xxxx</td>
              <td colspan="2">报价日期</td>
              <td colspan="2">2021-12-22</td>
            </tr>
            <tr>
              <td colspan="8" style="font-size: 30px">报价清单</td>
            </tr>
            <tr>
              <td>序号</td>
              <td>名称</td>
              <td>型号/规格</td>
              <td>数量</td>
              <td>单位</td>
              <td>单价（元）</td>
              <td>总价（元）</td>
              <td>备注</td>
            </tr>

            <tr>
              <td>一</td>
              <td colspan="6" class="itemspace">
                <span>硬件设备，主要包括</span>
              </td>
              <td>备注</td>
            </tr>

            <tr>
              <td>1</td>
              <td>无人机机体</td>
              <td>大疆·经纬M300RTK</td>
              <td>1</td>
              <td>台</td>
              <td>81300</td>
              <td>81300</td>
              <td>飞行器、手持式地面站、用户手册、包装运输箱</td>
            </tr>

            <tr>
              <td>2</td>
              <td style="width: 100px">无人机机体</td>
              <td>大疆·经纬M300RTK</td>
              <td>1</td>
              <td>台</td>
              <td>81300</td>
              <td>81300</td>
              <td>飞行器、手持式地面站、用户手册、包装运输箱</td>
            </tr>
            <tr></tr>

            <tr>
              <td>3</td>
              <td style="width: 100px">小计</td>
              <td></td>
              <td>1</td>
              <td>台</td>
              <td></td>
              <td>81300</td>
              <td></td>
            </tr>
            <tr>
              <td>二</td>
              <td colspan="6" class="itemspace">
                <span>软件设备，主要包括</span>
              </td>
              <td>备注</td>
            </tr>
            <tr>
              <td>2</td>
              <td style="width: 100px">无人机机体</td>
              <td>大疆·经纬M300RTK</td>
              <td>1</td>
              <td>台</td>
              <td>81300</td>
              <td>81300</td>
              <td>飞行器、手持式地面站、用户手册、包装运输箱</td>
            </tr>
            <tr>
              <td>3</td>
              <td style="width: 100px">小计</td>
              <td></td>
              <td>1</td>
              <td>台</td>
              <td></td>
              <td>81300</td>
              <td></td>
            </tr>

            <tr>
              <td>二</td>
              <td colspan="6" class="itemspace">
                <span>技术服务，主要包括</span>
              </td>
              <td>备注</td>
            </tr>
            <tr>
              <td>2</td>
              <td style="width: 100px">无人机机体</td>
              <td>大疆·经纬M300RTK</td>
              <td>1</td>
              <td>台</td>
              <td>81300</td>
              <td>81300</td>
              <td>飞行器、手持式地面站、用户手册、包装运输箱</td>
            </tr>
            <tr>
              <td>3</td>
              <td style="width: 100px">小计</td>
              <td></td>
              <td>1</td>
              <td>台</td>
              <td></td>
              <td>81300</td>
              <td></td>
            </tr>

            <tr>
              <td>四</td>
              <td style="width: 100px">合计</td>
              <td></td>
              <td></td>
              <td colspan="3">81300</td>
              <td></td>
            </tr>

            <tr>
              <td colspan="8">尚特杰电力科技有限公司</td>
            </tr>

            <!--    <tr v-for="item in approvalLogs">
          <td>{{item.approveName}}</td>
          <td colspan="3">{{item.approveMsg}}</td>
          <td>{{item.approveDate.substr(0,10)}}</td>
        </tr>  -->
          </tbody>
        </table>
      </div>
</div>
<button type="button" class="btn btn-primary" v-on:click="getPdf()">导出PDF</button>
  </div>
</template>

<script>


export default {
  name: 'Home',
  components: {
 
  },
  data(){
    return{
      htmlTitle:"测试"
    }
  }
}
</script>
<style scoped>
#exportPdf {
  background-color: #fff;
  width: 1000px;
  /* height: 400px; */
  margin: auto;
  padding: 10px;


}

.table_style td,
th {
  padding: 10px;
  font-size: 15px;
}

.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.itemspace > span {
  float: left;
}
</style>

到这里大家会发现功能是可以实现了，但是会有个致命的问题，导出来的pdf打印出来还是比较模糊的，那么，针对这个问题，我们要怎么解决呢？

我们的思路是：将canvas的属性width和height属性放大为2倍，最后将canvas的css样式width和height设置为原来1倍的大小即可，也就是，先将canvas高分辨率输出，再来压缩导出打印，即可，废话不多说，完整代码如下：

// 导出页面为PDF格式
 import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
    install (Vue, options) {
        Vue.prototype.getPdf = function () {
            var title = this.htmlTitle  //DPF标题
            html2Canvas(document.querySelector('#pdfDom'), {
                allowTaint: true,
                taintTest: false,
                useCORS: true,
                //width:960,
                //height:5072,
                dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
                scale:4 //按比例增加分辨率
            }).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')
                    }
            )
        }
    }
}

汪小敏同学

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue导出pdf

第一个.将页面html转换成图片npm install --save html2canvas 第二个.将图片生成pdfnpm install jspdf --save2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export de.
复制链接

扫一扫

专栏目录