# lijingpdfhtml

**Repository Path**: meetuuu_1/lijingpdfhtml

## Basic Information

- **Project Name**: lijingpdfhtml
- **Description**: 励晶-pdf-资源页面（暂时弃用）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-30
- **Last Updated**: 2025-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 安装项目
```
yarn install 
```
or

```
npm install 
```
### 运行项目
```
yarn serve
```
or

```
npm run serve
```
### 打包项目
```
yarn build
```
or

```
npm run build
```
### 文件目录说明
```
--pages
----index.vue     项目主页面
--main.js         项目主入口
--outputPDF.js    导出PDF文件
--request.js      axios请求配置文件
--components
----classCharts   各个课程的文件
------classOne1.vue
------...
----homePage      首页的页面
```

### 接口请求
```
// 接口使用的是axios请求方式，在main.js中已全局挂载，使用$https即可发起请求，例如
async getData() {
    let data1 = await this.$https.get("请求地址", '请求参数'); // get请求
    let data2 = await this.$https.post("请求地址", '请求参数');// post请求
    // or
    let data3 = await this.$https({
        url: '请求地址' ,
        method: 'post',
        data: '请求参数'
    })
    // async await 等价于下面这种写法
    this.$https.get("请求地址", '请求参数').then((res) => {
        //  xxx
    }).catch(e => {
        //  xxx
    })
}

```

### PDF注意事项
```
1. html中的class类名
    .allow_split  // 从该元素开始新的一页分页
    .prohibit_split // 不允许将该元素(含其子元素)切割
    .table_row  // table表格每一行必须加这个class才不会导致table的某行被切分
    .rich_text // 含有富文本的元素(只支持<p>和<img>标签)

2. 表格中表头的高度必须大于或者等于表格中其余每一行的高度
3. 生成pdf函数的参数outputPDF({
    element,
    contentWidth = 550,
    footer,
    header,
    filename = "pdf文件.pdf",
})
函数的参数为对象：
element 格式为dom元素，dom是要生成pdf的内容；
contentWidth为打印到A4纸上的内容宽度，默认为550，可不传。A4纸宽度固定宽度为592.28，和contentWidth的差值即为左右留白的距离；
header 格式为dom元素，dom是页眉的内容；
footer 格式为dom元素，dom是页脚的内容；
filename pdf下载的文件名，默认为"pdf文件.pdf",可不传。
```