Skip to content

I
intelligent_station_web
Commit d00bf073 authored by zxw's avatar zxw
Browse files
Options

课题列表pdf导出和代码修改

parent 874c80f1
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 295 deletions
src/main.js
View file @ d00bf073
......@@ -11,6 +11,10 @@ import xhr from '@/utils/request'
import '@/styles/index.scss' // global css
// 样式文件切换，通过localStorage存储的theme变量决定用哪套样式文件
import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)
// 手动设置皮肤变量，选择项目样式风格(如果没有设置并存储皮肤风格，则默认一套，可手动更改)
// console.log('aaaa', window.localStorage.getItem('theme'))
if (!window.localStorage.getItem('theme')) {
......
src/utils/htmlToPdf.js 0 → 100644
View file @ d00bf073
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue) {
/**
*
* @param {*} reportName 下载时候的标题
* @param {*} isDownload 是否下载默认为下载，传false不下载
*/
Vue.prototype.getPdf = function(reportName, isDownload = true) {
// var target = document.getElementsByClassName("right-aside")[0];
// target.style.background = "#FFFFFF";
return new Promise((resolve, reject) => {
var title = reportName
html2Canvas(document.querySelector('#app'), {
allowTaint: true
}).then((canvas) => {
const contentWidth = canvas.width
const contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = contentWidth / 592.28 * 841.89
// 未生成pdf的html页面高度
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28
const imgHeight = 592.28 / contentWidth * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', 'a4')
// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围，无需分页
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()
}
}
}
if (isDownload) {
PDF.save(title + '.pdf')
}
// 删除本地存储的base64字段
var pdfData = PDF.output('datauristring')// 获取base64Pdf
resolve(pdfData)
}
).catch(error => {
reject(error)
})
})
}
}
}
src/views/myTopic/newTopic/index.vue
View file @ d00bf073
......@@ -20,207 +20,144 @@
<el-tab-pane label="申报信息">
<div class="centered-title">课题名称及申请人基本情况</div>
<div>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid black; width: 200px;height: 40px">课题号</th>
<td style="border: 1px solid black;" colspan="5" />
</tr>
<tr>
<th style="border: 1px solid black;">课题名称</th>
<td style="border: 1px solid black;" colspan="5">
<el-input v-model="ruleForm.name" style="width: 200px; margin: 0 10px" />
</td>
</tr>
<tr>
<th style="border: 1px solid black; ">申报类型</th>
<td style="border: 1px solid black; width: 200px;">
<el-select v-model="ruleForm.region" placeholder="请选类型" style="margin: 0 10px;">
<el-option label="一般课题" value="shanghai" />
<el-option label="重点课题" value="beijing" />
</el-select>
</td>
<th style="border: 1px solid black; width: 200px;">申请人身份</th>
<td style="border: 1px solid black; width: 200px;">
<el-select v-model="ruleForm.identity" placeholder="请选择身份" style="margin: 0 10px;">
<el-option label="计算机科学教授" value="beijing" />
<el-option label="工程学教授" value="beijing" />
<el-option label="思政教授" value="shanghai" />
<el-option label="文学教授" value="beijing" />
<el-option label="历史学教授" value="beijing" />
<el-option label="经济学教授" value="beijing" />
<el-option label="艺术学教授" value="beijing" />
</el-select>
</td>
<th style="border: 1px solid black; width: 200px;">填表日期</th>
<td style="border: 1px solid black;">
<!-- <el-input v-model="ruleForm.name" style="width: 200px; margin: 0 10px" />-->
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</td>
</tr>
<tr>
<th style="border: 1px solid black; ">负责人姓名</th>
<td style="border: 1px solid black;">
<el-input
v-model="ruleForm.name"
style="width: 200px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; width: 200px;">研究专长</th>
<td style="border: 1px solid black;">
<el-input
v-model="ruleForm.name"
style="width: 200px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; ">性别</th>
<td style="border: 1px solid black; width: 200px;">
<el-select v-model="ruleForm.region" placeholder="请选类型" style="margin: 0 10px;">
<el-option label="男" value="shanghai" />
<el-option label="女" value="beijing" />
</el-select>
</td>
</tr>
<tr>
<th style="border: 1px solid black; ">党政职务</th>
<td style="border: 1px solid black;">
<el-input
v-model="ruleForm.name"
style="width: 200px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; width: 200px;">专业技术职务</th>
<td style="border: 1px solid black;">
<el-input
v-model="ruleForm.name"
style="width: 200px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; width: 200px;">年龄</th>
<td style="border: 1px solid black;">
<el-input
v-model="ruleForm.name"
style="width: 200px;
margin: 0 10px"
:disabled="true"
/>
</td>
</tr>
<tr>
<th style="border: 1px solid black; width: 300px;">最后的学历</th>
<td style="border: 1px solid black;" colspan="2">
<el-input
v-model="ruleForm.name"
style="width: 350px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; width: 300px;">最后学位</th>
<td style="border: 1px solid black;" colspan="2">
<el-input
v-model="ruleForm.name"
style="width: 350px;
margin: 0 10px"
:disabled="true"
/>
</td>
</tr>
<tr>
<th style="border: 1px solid black; width: 300px;">单位</th>
<td style="border: 1px solid black;" colspan="2">
<el-input
v-model="ruleForm.name"
style="width: 350px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; width: 300px;">学院/部门</th>
<td style="border: 1px solid black;" colspan="2">
<el-input
v-model="ruleForm.name"
style="width: 350px;
margin: 0 10px"
:disabled="true"
/>
</td>
</tr>
<tr>
<th style="border: 1px solid black; width: 300px;">手机</th>
<td style="border: 1px solid black;" colspan="2">
<el-input
v-model="ruleForm.name"
style="width: 350px;
margin: 0 10px"
:disabled="true"
/>
</td>
<th style="border: 1px solid black; width: 300px;">E-mail</th>
<td style="border: 1px solid black;" colspan="2">
<el-input
v-model="ruleForm.name"
style="width: 350px;
margin: 0 10px"
:disabled="true"
/>
</td>
</tr>
</table>
<div class="centered-title">
申请人与本课题有关的近期研究成果
<i class="el-icon-question" style="color: #599fd1" />
</div>
<div>
<vue-ueditor-wrap
v-model="content"
editor-id="editor"
:config="editorConfig"
:editor-dependencies="['ueditor.config.js','ueditor.all.js']"
/>
</div>
<div class="centered-title">
本课题研究实施方案
<i class="el-icon-question" style="color: #599fd1" />
</div>
<div>
<vue-ueditor-wrap
v-model="implementationPlan"
editor-id="editorTwo"
:config="implementationPlanTwo"
:editor-dependencies="['ueditor.config.js','ueditor.all.js']"
/>
</div>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr>
<th
style="border: 1px solid black;
font-size: 24px;"
colspan="8"
>
<div style="margin: 10px 0">研究项目的基础条件及前期准备工作</div>
</th>
</tr>
<tr>
<th
style="border: 1px solid black;
font-size: 24px;"
colspan="8"
>
<div style="margin: 10px 0">课题主要参加者基本情况</div>
</th>
</tr>
<el-form ref="ruleForm" :model="ruleForm" label-width="120px">
<el-row>
<el-form-item label="课题号" label-width="80px">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 100%" />
</el-form-item>
<el-form-item label="课题名称" label-width="80px">
<el-input v-model="ruleForm.name" style="width: 100%" />
</el-form-item>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="申报类型" label-width="80px">
<el-select v-model="ruleForm申报类型" placeholder="请选择类型" style="width: 260px">
<el-option label="一般课题" value="general" />
<el-option label="重点课题" value="key" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="申请人身份">
<el-select v-model="ruleForm.identity" placeholder="请选择身份" style="width: 260px">
<el-option label="计算机科学教授" value="computer_science_professor" />
<el-option label="工程学教授" value="engineering_professor" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="填表日期">
<el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期" style="width: 260px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="负责人姓名" label-width="80px">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 260px" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="研究专长">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 260px" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="性别">
<el-select v-model="ruleForm.identity" placeholder="请选择性别" style="width: 260px">
<el-option label="男" value="computer_science_professor" />
<el-option label="女" value="engineering_professor" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="党政职务" label-width="80px">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 260px" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="专业技术职务">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 260px" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="年龄">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 260px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="最后学历" label-width="80px">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 460px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最后学位" label-width="80px">
<el-input v-model="ruleForm.name" disabled style="width: 460px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="单位" label-width="80px">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 460px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学院/部门" label-width="80px">
<el-input v-model="ruleForm.name" disabled style="width: 460px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号" label-width="80px">
<el-input v-model="ruleForm.topicNumber" disabled style="width: 460px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="E-mail" label-width="80px">
<el-input v-model="ruleForm.name" disabled style="width: 460px" />
</el-form-item>
</el-col>
</el-row>
<div class="centered-title">
申请人与本课题有关的近期研究成果
<i class="el-icon-question" style="color: #599fd1" />
</div>
<div>
<vue-ueditor-wrap
v-model="content"
editor-id="editor"
:config="editorConfig"
:editor-dependencies="['ueditor.config.js','ueditor.all.js']"
/>
</div>
<div class="centered-title">
本课题研究实施方案
<i class="el-icon-question" style="color: #599fd1" />
</div>
<div>
<vue-ueditor-wrap
v-model="implementationPlan"
editor-id="editorTwo"
:config="implementationPlanTwo"
:editor-dependencies="['ueditor.config.js','ueditor.all.js']"
/>
</div>
<div style="text-align: center; margin: 20px 0; font-size: 24px; color: #000000">
研究项目的基础条件及前期准备工作
</div>
<div style="text-align: center; margin: 20px 0; font-size: 24px; color: #000000">
课题主要参加者基本情况
</div>
<tr>
<th style="border: 1px solid black; width: 50px;">
<el-checkbox v-model="checked" />
......@@ -248,98 +185,91 @@
<el-button icon="el-icon-delete" @click="deleteItem(index)" />
</td>
</tr>
</table>
<!-- 弹出表单 -->
<el-dialog title="添加内容" :visible.sync="showForm">
<el-form :model="formData">
<el-form-item label="姓名">
<el-input v-model="formData.name" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age" />
</el-form-item>
<el-form-item label="专业技术职务">
<el-input v-model="formData.position" />
</el-form-item>
<el-form-item label="工作单位 (部门)">
<el-input v-model="formData.unit" />
</el-form-item>
<el-form-item label="研究专长">
<el-input v-model="formData.specialty" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="showForm = false">取消</el-button>
<el-button type="primary" @click="addData">确认</el-button>
</span>
</el-dialog>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr>
<th
style="border: 1px solid black;
font-size: 24px;"
colspan="8"
>
<div style="margin: 10px 0">课题组分工及前期准备情况</div>
</th>
</tr>
<tr>
<th
style="border: 1px solid black;
font-size: 24px;"
colspan="8"
>
<div style="margin: 150px 0" />
</th>
</tr>
<tr>
<th
style="border: 1px solid black;
font-size: 24px;"
colspan="8"
<!-- 弹出表单 -->
<el-dialog title="添加内容" :visible.sync="showForm">
<el-form :model="formData">
<el-form-item label="姓名">
<el-input v-model="formData.name" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age" />
</el-form-item>
<el-form-item label="专业技术职务">
<el-input v-model="formData.position" />
</el-form-item>
<el-form-item label="工作单位 (部门)">
<el-input v-model="formData.unit" />
</el-form-item>
<el-form-item label="研究专长">
<el-input v-model="formData.specialty" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="showForm = false">取消</el-button>
<el-button type="primary" @click="addData">确认</el-button>
</span>
</el-dialog>
<div style="text-align: center; margin: 30px 0; font-size: 24px; color: #000000">
课题组分工及前期准备情况
</div>
<div style="margin: 40px 0">
<el-input v-model="form.desc" type="textarea" />
</div>
<div style="text-align: center; margin: 20px 0; font-size: 24px; color: #000000">
完成本课题条件分析 (含参加人员的研究水平、资料准备等情况)
</div>
<div style="margin: 50px 0">
<el-input v-model="form.desc" type="textarea" />
</div>
<div>
<div>
预期成果
</div>
<div style="margin-left: 70px;">
<!-- 第一行复选框 -->
<el-checkbox v-model="checked">SSCI论文</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 170px;">CSSCI论文</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 170px;">国家级课题</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 170px;">省部级课题</el-checkbox>
</div>
<div
style="
margin: 10px 70px;"
>
<div style="margin: 10px 0">完成本课题条件分析 (含参加人员的研究水平、资料准备等情况)</div>
</th>
</tr>
<tr>
<th
style="border: 1px solid black;
font-size: 24px;"
colspan="8"
<!-- 第二行复选框 -->
<el-checkbox v-model="checked">专著</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 200px">研究报告</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 180px;">网络文章</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 185px;">其他</el-checkbox>
</div>
</div>
<div>
<div style="margin-top: 30px;">申报附件材料</div>
<el-upload
style="margin:10px 100px;"
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple
>
<div style="margin: 150px 0" />
</th>
</tr>
<tr>
<th style="border: 1px solid black;">
<div style="margin: 40px; width: 120px;">预期成果</div>
</th>
<td style="border: 1px solid black;" colspan="5">
<el-checkbox v-model="checked" style="margin-left: 82px;">SSCI论文</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 200px;">CSSCI论文</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 200px;">国家级课题</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 200px;">省部级课题</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 85px; margin-top: 30px;">专著</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 229px;">研究报告</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 210px;">网络文章</el-checkbox>
<el-checkbox v-model="checked" style="margin-left: 215px">其他</el-checkbox>
</td>
</tr>
<tr>
<th style="border: 1px solid black;">
<div style="margin: 10px;">申报附件材料</div>
</th>
<td style="border: 1px solid black; text-align: center; vertical-align: middle;">
<i class="el-icon-upload" style="font-size: 24px;" />
</td>
</tr>
</table>
<div style="margin: 10px; text-align: center;">
<el-button v-if="showBtn" type="primary" @click="temporarySaving">临时保存</el-button>
<el-button v-if="showBtn" type="primary" @click="submitRequest">提交立项申请</el-button>
<el-button v-else type="primary" @click="quashRequest">撤销申请</el-button>
</div>
</div>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</div>
<div style="display: flex; align-items: center; margin-top: 30px;">
<div style="margin-right: 20px;">申报书</div>
<div>下载申报书</div>
</div>
<div style="margin: 10px; text-align: center;">
<el-button v-if="showBtn" type="primary" @click="temporarySaving">临时保存</el-button>
<el-button v-if="showBtn" type="primary" @click="submitRequest">提交立项申请</el-button>
<el-button v-else type="primary" @click="quashRequest">取消申请</el-button>
</div>
</el-form></div>
</el-tab-pane>
<el-tab-pane label="配置管理">
配置管理2222
......@@ -358,6 +288,7 @@
<script >
import VueUeditorWrap from 'vue-ueditor-wrap'
import form from 'element-ui/packages/form'
export default {
components: {
VueUeditorWrap
......@@ -400,6 +331,11 @@ export default {
}
}
},
computed: {
form() {
return form
}
},
methods: {
addData() {
// 将表单数据添加到表格数据中
......@@ -450,7 +386,7 @@ export default {
}).catch(() => {
this.$message({
type: 'info',
message: '已取消提交立项申请'
message: '取消成功'
})
})
},
......@@ -462,13 +398,13 @@ export default {
}).then(() => {
this.$message({
type: 'success',
message: '撤销立项申请成功!'
message: '取消成功!'
})
this.showBtn = true
}).catch(() => {
this.$message({
type: 'info',
message: '撤销取消立项申请成功!'
message: '取消成功!'
})
})
}
......@@ -507,4 +443,8 @@ export default {
background-color: #ffffff; /* 例如，修改背景颜色 */
/* 其他您想要应用的样式 */
}
.el-textarea__inner {
min-height: 100px !important;
}
</style>
src/views/myTopic/newTopic/index_e.vue 0 → 100644
View file @ d00bf073
<template>
<div>
<div style="margin-top: 50px;text-align: center">
<el-button type="primary" @click="exportPDF">导出PDF</el-button>
<el-button type="primary" @click="exportPDF2">导出PDF2</el-button>
<el-button type="primary" @click="getPdf()">导出PDF3</el-button>
</div>
<div
id="pdfDom"
ref="pdfContent"
style="margin-left: 200px;
margin-top: 20px;
margin-right: 150px"
width="100%"
class="mmm"
>
<el-table :data="tableData" style="width: 900px; margin-top: 50px;">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
<div style="margin-top: 20px; color: #000000; background: white">
王五
</div>
<div style="margin-top: 40px">
<h1>1Element 默认提供一套主\，方便使用者覆盖样式。</h1>
<h1>4Element 默认提供一sdfsf套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。</h1>
<h1>4Element 默认提供asihduidgfy题，CSS 方便使用者覆盖样式。</h1>
<h1>4Element 默认提werwer供一套主题，CSS 命名EM 的风格，方便使用者覆盖样式。</h1>
</div>
</div>
</div>
</template>
<script>
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '李四',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王五',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '张三',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '李武',
address: '上海市普陀区金沙江路 1516 弄'
}],
htmlTitle: 'PDF测试'
}
},
methods: {
async exportPDF() {
const content = this.$refs.pdfContent
const canvas = await html2canvas(content)
const imgData = canvas.toDataURL('image/png')
// eslint-disable-next-line new-cap
const doc = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: 'a4'
})
const imgProps = doc.getImageProperties(imgData)
const pdfWidth = doc.internal.pageSize.getWidth()
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
doc.save('导出pdf测试1.pdf')
},
exportPDF2() {
html2canvas(document.querySelector('#pdfDom'), {
allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
useCORS: true, // 是否尝试使用CORS从服务器加载图像
dpi: 500, // 导出pdf清晰度
scale: window.devicePixelRatio // 用于渲染的比例。默认为浏览器设备像素比率。
}
).then(function(canvas) {
var imageData = canvas.toDataURL('image/jpeg', 1.0) // html生成图片的数据
const canvasWidth = canvas.width // 原本的html页面的宽高
const canvasHeight = canvas.height
// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
var a4Width = 595 // A4 宽度
var a4Height = (595 / canvasWidth) * canvasHeight // A4总高度
const pageHeight = canvasWidth / 595 * 842 // 生成pdf的一页显示html的高度
let restHeight = canvasHeight // 未生成pdf的html页面高度，最初是整体的高度
var position = 0 // 页面上下偏移的大小
/**
* 参数1：方向：l：横向 p：纵向
* 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
* 参数3：格式：默认为a4
*/
// eslint-disable-next-line new-cap
var pdf = new jsPDF('p', 'pt', 'a4')
if (restHeight < pageHeight) { // 当内容未超过pdf一页显示的范围，无需分页
/**
* 将图像添加到PDF中
* 参数1：图片的url
* 参数2：图片的格式
* 参数3：图片上下偏移的大小
* 参数4：原始宽度
* 参数5：原始高度
*/
pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
} else {
while (restHeight > 0) {
pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
restHeight -= pageHeight
position -= 842
if (restHeight > 0) {
pdf.addPage() // 在PDF文档中添加新页面
}
}
}
pdf.save('导出pdf测试2' + '.pdf')
}
)
}
}
}
</script>
<style>
.mmm {
background: linear-gradient(to right, #39fad7, #f9faa1,#39fad7); /* 标准的语法 */
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment