尝试访问 DOM 的 clientWidth 和 clientHeight 引用时出现 Vue 问题
Vue problem when trying to access the clientWidth and clientHeight refs of the DOM
Property 'clientWidth' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'clientHeight' does not exist on type 'Vue | Element | Vue[] | Element[]'.
<div class="invoice-step-detail" id="invoice" ref="invoice">
@Component({
name: 'CreateInvoice',
components: { }
})
export default class CreateInvoice extends Vue {
downloadPdf(){
let pdf = new jsPDF("p", "pt", "a4", true);
let invoice = document.getElementById('invoice');
let width = this.$refs.invoice.clientWidth;
let height = this.$refs.invoice.clientHeight;
html2canvas(invoice!).then(canvas => {
let image = canvas.toDataURL('image/png');
pdf.addImage(image, 'PNG', 0, 0, width * 0.55, height * 0.55);
pdf.save('invoice');
})
}
async submitInvoice(): Promise<void> {
this.invoice = {
createdOn: new Date,
updatedOn: new Date,
customerId: this.selectedCustomerId,
lineItems: this.lineItems,
};
await invoiceService.makeNewInvoice(this.invoice);
this.downloadPdf();
await this.$router.push("/orders");
}
}
有什么建议吗?我还是 vue 的新手,奇怪的是这段代码是这样工作的,但它会抛出那个错误。
在您的组件中添加字段 $refs
和您定义的引用,类型为 HTMLElement
:
export default class CreateInvoice extends Vue {
$refs:{
invoice:HTMLElement
}
downloadPdf(){
...
更多详情请查看this
Property 'clientWidth' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'clientHeight' does not exist on type 'Vue | Element | Vue[] | Element[]'.
<div class="invoice-step-detail" id="invoice" ref="invoice">
@Component({
name: 'CreateInvoice',
components: { }
})
export default class CreateInvoice extends Vue {
downloadPdf(){
let pdf = new jsPDF("p", "pt", "a4", true);
let invoice = document.getElementById('invoice');
let width = this.$refs.invoice.clientWidth;
let height = this.$refs.invoice.clientHeight;
html2canvas(invoice!).then(canvas => {
let image = canvas.toDataURL('image/png');
pdf.addImage(image, 'PNG', 0, 0, width * 0.55, height * 0.55);
pdf.save('invoice');
})
}
async submitInvoice(): Promise<void> {
this.invoice = {
createdOn: new Date,
updatedOn: new Date,
customerId: this.selectedCustomerId,
lineItems: this.lineItems,
};
await invoiceService.makeNewInvoice(this.invoice);
this.downloadPdf();
await this.$router.push("/orders");
}
}
有什么建议吗?我还是 vue 的新手,奇怪的是这段代码是这样工作的,但它会抛出那个错误。
在您的组件中添加字段 $refs
和您定义的引用,类型为 HTMLElement
:
export default class CreateInvoice extends Vue {
$refs:{
invoice:HTMLElement
}
downloadPdf(){
...
更多详情请查看this