尝试访问 DOM 的 clientWidth 和 clientHeight 引用时出现 Vue 问题答案

【问题标题】：Vue problem when trying to access the clientWidth and clientHeight refs of the DOM尝试访问 DOM 的 clientWidth 和 clientHeight 引用时出现 Vue 问题
【发布时间】：2021-02-21 14:34:50
【问题描述】：

“Vue | 类型”上不存在属性“clientWidth”元素 | Vue[] |元素[]'。
'Vue | 类型不存在属性'clientHeight'元素 | Vue[] |元素[]'。

<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 的新手，奇怪的是这段代码以这种方式工作，但却引发了这个错误。

【问题讨论】：

您在哪里使用此代码？在mounted 或created 内部？
你在使用 vue-class-component 吗？
是的。我更新了代码，以便您可以看到该函数的调用。它不在安装或创建上。这是使用 jsPDF 和 html2canvas 从页面保存 pdf 文件的两个函数。

标签： html typescript vue.js vuejs2 vue-class-components

【解决方案1】：

在您的组件中添加字段 $refs 与您定义的引用 HTMLElement 作为类型：

export default class CreateInvoice extends Vue {
$refs:{
  invoice:HTMLElement
}
downloadPdf(){
...

更多详情请查看this

【讨论】：