html - 尝试访问 DOM 的 clientWidth 和 clientHeight 引用时出现 Vue 问题
问题描述
'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 的新手,奇怪的是这段代码以这种方式工作,但它会引发该错误。
解决方案
在您的组件中,$refs
使用您定义的 refs将字段添加HTMLElement
为 type :
export default class CreateInvoice extends Vue {
$refs:{
invoice:HTMLElement
}
downloadPdf(){
...
有关更多详细信息,请检查此
推荐阅读
- spring-boot - Spring boot config log4j2使用Web查找不起作用
- javascript - 在 Pug 中将对象变量从服务器传递到客户端
- java - 如何使用 Cygwin 运行 Java 应用程序
- keycloak - 如何将http方法添加到Keycloak的资源中
- reactjs - 为什么我的减速器返回未定义的 React TypeScript
- node.js - 无法验证第一个证书;NodeJs 与 Python 请求
- c# - 'Service1.InsertSupplier(Supplier)':并非所有代码路径都返回值
- mysql - 如何实现“SHOW COLUMN FROM (SELECT Result) WHERE Column_name = 'column_name'”?
- mysql - 我想将函数的 NOT NULL 字符串结果与表中可以为 NULL 的字段结合起来
- rust - 如何处理 HashMap 中的每个值并选择性地拒绝一些值?