## Html2Pdf 导出pdf
将长页面或元素节点导出为pdf文件
![](https://img.kancloud.cn/1f/3e/1f3ecb2758b6dc3ecf8c44750ea67b36_488x433.png =200x)
### 代码示例
```javascript
<template>
<div class="page">
<cvu-button type="primary" :loading="loading" @on-click="handleClick">导出pdf</cvu-button>
</div>
</template>
<script>
export default {
data() {
return {
loading: false
}
},
methods: {
handleClick() {
this.loading = true
this.$cvuHtml2Pdf({
class: '.page',
fileName: 'html2pdf导出文件'
}).then(() => {
this.loading = false
})
}
}
}
</script>
<style lang="scss" scoped>
.page{
height: 100%;
padding: 15px;
box-sizing: border-box;
}
</style>
```
### methods
>[success] this.$cvuHtml2Pdf(options).then()
- options:
- id: 页面或元素节点id,如:'#page'
- class:页面或元素节点class,如:'.page'
- fileName:文件名称
- margin:内容边距
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器