打印当前页面

Posted 2022-07-12 wssdx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打印当前页面相关的知识，希望对你有一定的参考价值。

window.print()

<br />

<Button type="warning" v-if="this.$store.state.user.permissionList[‘报销单详情‘].operationVOS.expense_list"

@click="exportDetails()" style="margin-right: 5px;">导出</Button>

<Button type="primary" v-if="this.$store.state.user.permissionList[‘报销单详情‘].operationVOS.expense_list"

@click="print()">打印</Button>

</div>

<br />

<h2 class="title">样衣报销明细表</h2>

</Table>

<span style="margin-right:15px;">default_date</span>

<span>default_name</span>

</div>

<br />

</div>

</Modal>

</div>

</template>

import imgUpload from ‘@/view/components/imgUpload.vue‘

import Expense from ‘@/api/expense.js‘

import axios from ‘axios‘

export default

components:

imgUpload

data()

return

modal:false,

printPage: false,

id: this.$route.query.id,

listData: [],

default_date: ‘‘,

default_name: ‘‘,

imgUrl: [],

num:‘‘,

changeReimbursement:‘‘,

columns: [

type: ‘index‘,

title: ‘序号‘,

align: ‘center‘,

width: 35,

height: 70,

title: ‘样衣图片‘,

key: ‘imgUrl‘,

align: ‘center‘,

width: 100,

render: (h, params) =>

return h(‘img‘,

attrs:

class: ‘sampleImg‘,

src: this.listData[params.index].imgSrc

)

title: ‘样衣编码‘,

key: ‘sampleDressCode‘,

align: ‘center‘,

width: 102,

render:(h,params)=>

return h(‘div‘,

style:

color: ‘red‘,

cursor: ‘pointer‘

on:

‘click‘: (event) =>

// this.$router.push(‘/sample_manage/detail/‘+params.row.sampleDressId)

let url = ‘/sample_manage/detail/‘ + params.row.sampleDressId

this.$router.push( path: url)

,params.row.sampleDressCode)

title: ‘样衣名称‘,

key: ‘sampleDressName‘,

align: ‘center‘,

width: 75

title: ‘品类‘,

key: ‘inventoryCategory‘,

align: ‘center‘,

width: 50

title: ‘来源类型‘,

key: ‘serverType‘,

align: ‘center‘,

width: 65,

render: (h, params) =>

switch (params.row.styleDipartite)

case 1:

return h(‘div‘, , ‘供款‘)

break;

case 2:

return h(‘div‘, , ‘采购‘)

break;

case 3:

return h(‘div‘, , ‘自主‘)

break;

case 4:

return h(‘div‘, , ‘自研‘)

break;

default:

break;

title: ‘款式来源‘,

key: ‘styleSource‘,

align: ‘center‘,

width: 70

title: ‘渠道来源‘,

key: ‘channelSource ‘,

align: ‘center‘,

width: 70,

render: (h, params) =>

switch (params.row.channelSource)

case 1:

return h(‘div‘, , ‘供款公司‘)

break;

case 2:

return h(‘div‘, , ‘外采样衣‘)

break;

case 3:

return h(‘div‘, , ‘市场批发‘)

break;

case 4:

return h(‘div‘, , ‘看图打样‘)

break;

case 5:

return h(‘div‘, , ‘库存‘)

case 6:

return h(‘div‘, , ‘技术部‘)

default:

break;

title: ‘采购价格‘,

key: ‘purchasePrice‘,

align: ‘center‘,

width: 50

title: ‘件数‘,

key: ‘quantity‘,

align: ‘center‘,

width: 50

title: ‘报销金额‘,

key: ‘reimbursement‘,

align: ‘center‘,

width: 50,

render:(h,params)=>

return h(‘div‘,

style:

color:‘#2D8cF0‘,

cursor:‘pointer‘

on:

click:()=>

if(params.row.sampleDressCode === ‘合计‘)

this.$Message.warning(‘不能更改合计总价‘)

else

this.modal=true

this.changeReimbursement=‘‘

this.sampleDressId = params.row.sampleDressId

,params.row.reimbursement)

title: ‘备注‘,

key: ‘updateDate‘,

align: ‘center‘,

width: 60

created()

this.printPage = this.$route.name === ‘lookDetail‘ ? false : true

this.getList(this.id)

methods:

getList(id)

Expense.getDetailList(id).then(data =>

//计算合计

// let sun = 0

// let sun1 = 0

let total = data

// total.forEach(ele =>

// sun = sun + ele.quantity

// sun1 = sun1 + ele.reimbursement

// )

this.listData = data

let num = 0

this.listData.forEach(ele =>

if (ele.imgUrl)

num++

axios(

url: `/file/views/$ele.imgUrl`,

methods: ‘get‘,

responseType: ‘blob‘,

).then((data) =>

let blob = data.data;

let src = window.URL.createObjectURL(blob)

// ele.imgSrc = src

this.$set(ele,‘imgSrc‘,src)

// console.log(data)

num--

)

let interval = setInterval(()=>

if(num === 0 && this.$route.name !== ‘lookDetail‘)

clearInterval(interval)

setTimeout(() =>

window.print()

,500)

else if(num === 0)

clearInterval(interval)

,500)

// this.listData.push(

// sampleDressCode: ‘合计‘,

// quantity: sun,

// reimbursement: sun1,

// )

if (this.listData.length > 0)

this.default_date = this.listData[0].createDate

this.default_name = this.listData[0].createName

)

// 打印

print()

// window.open(‘#/print-expense/‘+this.id+‘?isp=true‘ + (D?‘&detail=true‘:‘‘))

window.open(`#/print-lookDetail?id=$this.id`)

//明细导出

exportDetails()

this.$axios(

url:‘findSampleFormPrintExport/‘+this.id,

method:‘get‘,

responseType: ‘blob‘,

).then((data)=>

console.log(‘明细导出‘)

const url = window.URL.createObjectURL(data.data)

const a = document.createElement(‘a‘)

a.href = url

a.download = ‘样衣报销明细表.xls‘

document.body.appendChild(a)

a.click()

window.URL.revokeObjectURL(url)

document.body.removeChild(a)

)

modalCancel()

this.modal=false

modalOk()

let amount=

expenseAccountId:this.id,

dressBaseList:[

purchasePrice:this.changeReimbursement,

sampleDressId:this.sampleDressId

]

if(this.changeReimbursement == ‘‘)

this.$Message.warning(‘输入价格不能为空‘)

else

Expense.updateAmount(amount).then(data =>

this.$Message.success(‘更改价格成功!‘);

this.modal=false

this.getList(this.id)

)

</script>

.lookDetail

/* 重置taber样式 */

.ivu-table-wrapper

border: none

.ivu-table table

/* border: 1px solid #ccc */

.ivu-table th,

.ivu-table td

border: 1px solid #ddd;

.ivu-table:after

background-color: transparent

.ivu-table:before

background-color: transparent

/* 编辑表格 */

.title

width: 778px;

height: 45px;

text-align: center;

line-height: 45px;

border: 1px solid #ccc;

.ivu-table-cell

padding: 0px

.ivu-table-column-center

.ivu-table-cell

.sampleImg

width: 80px;

height: 80px;

padding-top: 5px;

.ivu-table-tbody tr:last-child img

display: none;

</style>

以上是关于打印当前页面的主要内容，如果未能解决你的问题，请参考以下文章

打印当前页面

我需要使用其他条件在我的 laravel 页面中打印当前没有产品 [关闭]

JS返回当前日期

@media print不打印当前页面

如何设置当前网页打印时的页眉参数为包括“当前页码”和“网页总数”?

ajax如何将先将当前页面清空，然后得到的json格式数据打印输出在页面上