一勋颖、打印當(dāng)前頁數(shù)據(jù)
單頁打印.png
只對當(dāng)前頁面可見數(shù)據(jù)進行打印嗦嗡，實現(xiàn)方法不唯一，此處介紹相對簡單的vue-print-nb饭玲。他的缺點是只能打印可見區(qū)域侥祭，不能分頁打印 。
1.安裝
npm install vue-print-nb --save
2.引入
// 安裝好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print); //注冊
3.使用
3.1直接使用id茄厘，不對最終打印的表格進行樣式修改
- template
// 通過ID直接打印
<div id="print_demo" >
<p>打印內(nèi)容</p>
</div>
<button v-print="'#print_demo'">打印</button>
3.2使用printObj矮冬，可以對打印的表格進行樣式調(diào)整
- template
// 使用printObj
<button v-print="printObj">打印</button>
<div id="print_demo" style="background:red;">
<p>打印內(nèi)容</p>
</div>
- script
export default {
data() {
return {
printObj: {
id: "print_demo",
popTitle: '打印的標(biāo)題',
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
};
}
}
二、打印數(shù)據(jù)庫內(nèi)全部數(shù)據(jù)
全部打印.png
將數(shù)據(jù)庫內(nèi)的全部數(shù)據(jù)以表格的形式進行打印次哈，需要調(diào)用后臺接口直接從數(shù)據(jù)庫內(nèi)進行數(shù)據(jù)的查找胎署，而不是直接在頁面內(nèi)獲取數(shù)據(jù)。
1.安裝
npm install print-js --save
2.引入
// 在當(dāng)前vue文件內(nèi)引用
import printJS from 'print-js'
3.使用
- template
<el-button @click="printJson">打印全部表格</el-button>
- script-->methods
async printJson() {
//通過getdata調(diào)用后臺接口獲取數(shù)據(jù)封裝到res
const res = await getdata();
this.list = res.data || [];
let data = []
for (let i=0; i < this.list.length; i++) {
data.push({
field1: this.list[i].field1,
field2: this.list[i].field2,
field3: this.list[i].field3,
field4: this.list[i].field4,
})
}
printJS({
printable: data,
properties: [
{
field: 'field1',
displayName: '第一個字段',
columnSize: 1
},
{
field: 'field2',
displayName: '第二個字段',
columnSize: 1
},
{
field: 'field3',
displayName: '第三個字段',
columnSize: 1
},
{
field: 'field4',
displayName: '第四個字段',
columnSize: 1
}
],
type: 'json',
header: '標(biāo)題',
// 樣式設(shè)置
gridStyle: 'border: 2px solid #3971A5;',
gridHeaderStyle: 'color: red; border: 2px solid #3971A5;'
})
},
