Проблема Vue при попытке доступа к ссылкам clientWidth и clientHeight DOM

Свойство clientWidth не существует для типа Vue | Элемент | Vue [] | Элемент [] '.
Свойство clientHeight не существует для типа Vue | Элемент | 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, и странно то, что этот код работает таким образом, но вызывает эту ошибку.


typescript html vue.js vuejs2 vue-class-components
person JuniorDevCaput    schedule 09.11.2020    source источник
comment
Где вы используете этот код? Внутри mounted или created?   -  person null    schedule 09.11.2020
comment
вы работаете с vue-class-component?   -  person Boussadjra Brahim    schedule 09.11.2020
comment
да. Я обновил код, чтобы вы могли видеть вызов этой функции. его не на смонтированном или созданном. это две функции, которые сохраняют PDF-файл со страницы с помощью jsPDF и html2canvas.   -  person JuniorDevCaput    schedule 09.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

В вашем компоненте добавьте поле $refs с вашими определенными ссылками с HTMLElement в качестве типа:

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

для получения дополнительных сведений проверьте это

person Boussadjra Brahim    schedule 09.11.2020