Vue页面上实现PDF导出

下载包 npm i vue-to-pdf --save
在main.js/App.js中加入引用：

import vueToPdf from 'vue-to-pdf';
Vue.use(vueToPdf);

3.页面

点击导出pdf

页面代码

<template><div><button  @click="savePdf()">导出pdf</button><div style="width: 100%;padding:10px" ><tablestyle="width:1000px"align="center"width="100%"border="1"ref="exportPdf"> <tbody><tr><th colspan="10" class="zxstyle ly">计算机专业（专业代码：456454）</th></tr><tr><th class="zxstyle">课程类型</th><th class="zxstyle">序号</th><th class="zxstyle">课程代码</th><th class="zxstyle">课程名称</th><th class="zxstyle">学分</th><th class="zxstyle">教材名称</th><th class="zxstyle">主编</th><th class="zxstyle">出版社</th><th class="zxstyle">版次</th><th class="zxstyle">备注</th></tr><tr v-for="(item, index) in sjList" :key="item.id"><tdalign="center":rowspan="item.kclxspan":class="{ hidden: item.kclxdis }">{{ item.kclx }}</td><td>{{ index + 1 }}</td><td>{{ item.kcdm }}</td><td>{{ item.kcmc }}</td><td>{{ item.xf }}</td><td>{{ item.cjmc }}</td><td>{{ item.zb }}</td><td>{{ item.cbs }}</td><td>{{ item.bc }}</td><td>{{ item.bz }}</td></tr></tbody></table></div>
</div>
</template>
<script>
export default {name: "pdf",data: function() {return {sjList: [{kclx: "公共课",kcdm: "000015",kcmc: "语文",xf: "14",cjmc: "语文",zb: "张宏",cbs: "北京大学出版社",bc: "2025",bz: "无"},{kclx: "公共课",kcdm: "000013",kcmc: "英语",xf: "52",cjmc: "英语",zb: "张近东",cbs: "北京大学出版社",bc: "2027",bz: "无"},{kclx: "公共课",kcdm: "000019",kcmc: "数学",xf: "14",cjmc: "数学",zb: "阿斯蒂",cbs: "北京大学出版社",bc: "2028",bz: "无"},{kclx: "考核课",kcdm: "000056",kcmc: "物理",xf: "11",cjmc: "物理",zb: "萨蒂",cbs: "北京大学出版社",bc: "2029",bz: "无"},{kclx: "考核课",kcdm: "000045",kcmc: "化学",xf: "14",cjmc: "化学",zb: "名点",cbs: "北京大学出版社",bc: "2027",bz: "无"},{kclx: "公共课",kcdm: "000085",kcmc: "生物",xf: "36",cjmc: "生物",zb: "张炯",cbs: "北京大学出版社",bc: "2028",bz: "无"}]};},methods: {// 导出为pdfsavePdf(){this.$PDFSave(this.$refs.exportPdf, "文件名称");},}
};
</script>
<style scoped>
.hidden {display: none;}table {border-collapse: collapse;margin: 0 auto;text-align: center;
}
table td,
table th {border: 1px solid #cad9ea;color: #666;height: 30px;
}
table thead th {background-color: #cce8eb;width: 100px;
}
table tr:nth-child(odd) {background: #fff;
}
table tr:nth-child(even) {background: #f5fafa;
}
</style>

Vue页面上实现PDF导出相关推荐

ASP.NET 用 FlexPaper 在页面上显示 PDF 文件
必要条件演示 ASP.NET 用 FlexPaper 在页面上显示 PDF 文件软件环境解决方案结构简单显示 SWF 文件上传并显示 PDF 文件常见问题参考资料其实,虽说是显示 PD ...
将html转为vue,vue将HTML转PDF导出(纯干货)
第〇步:效果返参格式 image.png 导出格式(此时为PDF文件) image.png 步骤一 npm 安装 html2canvas 和 jspdf npm install html2canva ...
matlab保存pdf图片乱码,服务器上出现pdf导出乱码的解决方案
前言在开发环境中pdf导出是可以正常显示的,但是在上线后在linux服务器上导出就乱码,中文全部显示成了方块. 问题的出现原因因为生产上的服务器有过升级 ,而且环境是重新配置的. 一般我们使用的服 ...
html页面上的表格导出为excel文件,Web html table export to excel 网页上的表格数据导出到Excel文件中使用心得...
在网上搜索到几种方法,经测试得出二种比较简单而且可行方法, 第一种:使用JAVASCRIPT,不用重新从 Database 获得数据.直接把WEB上面的表格保存下来. A B function Aut ...
mvc在页面上显示PDF
/// <summary>/// 读取PDF文件/// </summary>/// <param name="fName">文件名称(可以从其他 ...
Vue实现PDF导出和打印功能
在Vue页面上实现PDF导出和打印功能依赖于两个npm插件,分别为vue-to-pdf和vue-easy-printer. 安装命令: npm i vue-to-pdf --save npm i vu ...
页面中展示PDF（转成Swf文件）
由于直接在页面上展示PDF会有编码困难及不安全等问题,所以想到先利用SWFTOOLS工具把PDF转成SWF格式的Flash文件然后在页面上利用ASP.NET自带的Flash播放器展示Flash文件,这 ...
vue页面导出pdf文档并上传pdf格式给后台
下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.js文件 import ...
vue页面导出pdf
vue页面导出pdf 下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.j ...

Vue页面上实现PDF导出

Vue页面上实现PDF导出

Vue页面上实现PDF导出相关推荐

最新文章

热门文章