canvas-editor-plugin
canvas-editor-plugin copied to clipboard
Hufe921
编辑器中的换行，导出到docx时全部失效
编辑器中的换行，导出到docx时全部失效，能是因为啥呢？框架vue
saveWord() { let that = this if ( this.$refs.child.instance ) { this.$message.error('请先生成文章') } else { this.$refs.child.instance.use(docxPlugin) this.$refs.child.instance.command.executeExportDocx({ fileName: that.docData.title }) } }
Hello, the plugin itself does not handle line wrapping and most styling, so when you export the document it will be completely unconfigured.
I made a PR with the handling of styles, including line wrapping. It has not yet been accepted, I believe because the author does not have time available. But if you want to check, here is the changes:
https://github.com/Hufe921/canvas-editor-plugin/pull/9
Hello, the plugin itself does not handle line wrapping and most styling, so when you export the document it will be completely unconfigured.
I made a PR with the handling of styles, including line wrapping. It has not yet been accepted, I believe because the author does not have time available. But if you want to check, here is the changes:
#9
您好，能发给我一个完整的包吗？感谢🙏 [email protected]
您好，能发给我一个完整的包吗？感谢🙏 [email protected]
Hello, for it to work I had to directly implement the plugin in my project, I couldn't make it work by installing via npm. I will attach the package with the implementation files. Just unzip and call within the editor implementation like this:
// imports required
import docxPlugin, { CommandWithDocx } from './plugins/docx'
//attach the plugins to the editor instance
const command = <CommandWithDocx>instance.command
instance.use(docxPlugin)
instance.use(exportPDF)
// code to import a file by clicking a button
const fileInput = document.querySelector<HTMLInputElement>('#file-docx')! // hidden input file element to select the file to be imported
document.querySelector<HTMLButtonElement>('#import-docx')!.onclick = () => {
fileInput.click()
}
fileInput.onchange = () => {
const file = fileInput?.files?.[0]
if (!file) return
const { lastModified, name } = file
const reader = new FileReader()
reader.onload = event => {
const buffer = event?.target?.result
if (buffer instanceof ArrayBuffer) {
command.executeImportDocx({
arrayBuffer: buffer
})
document.querySelector<HTMLButtonElement>('#id')!.value = ""
document.querySelector<HTMLButtonElement>('#file-name')!.value = name
document.querySelector<HTMLButtonElement>('#menu-last-modified')!.innerHTML = new Date(lastModified).toLocaleString()
}
fileInput.value = ''
}
reader.readAsArrayBuffer(file)
}
// code to export file to docx
const docxDom = document.querySelector<HTMLDivElement>('.menu-item__docx')!
// docxDom.title = `??(${isApple ? '?' : 'Ctrl'}+P)`
docxDom.onclick = function () {
console.log('export docx')
const fileName = 'docfile'
const commandDocx = instance.command as CommandWithDocx
commandDocx.executeExportDocx({
fileName
})
}
Here are the plugin implementation files... if you have any questions, I'm at your disposal, I hope it helps. docx.zip
您好，能发给我一个完整的包吗？感谢🙏 [email protected]
Hello, for it to work I had to directly implement the plugin in my project, I couldn't make it work by installing via npm. I will attach the package with the implementation files. Just unzip and call within the editor implementation like this:
// imports required import docxPlugin, { CommandWithDocx } from './plugins/docx'//attach the plugins to the editor instance const command = <CommandWithDocx>instance.command instance.use(docxPlugin) instance.use(exportPDF)// code to import a file by clicking a button const fileInput = document.querySelector<HTMLInputElement>('#file-docx')! // hidden input file element to select the file to be imported document.querySelector<HTMLButtonElement>('#import-docx')!.onclick = () => { fileInput.click() } fileInput.onchange = () => { const file = fileInput?.files?.[0] if (!file) return const { lastModified, name } = file const reader = new FileReader() reader.onload = event => { const buffer = event?.target?.result if (buffer instanceof ArrayBuffer) { command.executeImportDocx({ arrayBuffer: buffer }) document.querySelector<HTMLButtonElement>('#id')!.value = "" document.querySelector<HTMLButtonElement>('#file-name')!.value = name document.querySelector<HTMLButtonElement>('#menu-last-modified')!.innerHTML = new Date(lastModified).toLocaleString() } fileInput.value = '' } reader.readAsArrayBuffer(file) } // code to export file to docx const docxDom = document.querySelector<HTMLDivElement>('.menu-item__docx')! // docxDom.title = `??(${isApple ? '?' : 'Ctrl'}+P)` docxDom.onclick = function () { console.log('export docx') const fileName = 'docfile' const commandDocx = instance.command as CommandWithDocx commandDocx.executeExportDocx({ fileName }) }Here are the plugin implementation files... if you have any questions, I'm at your disposal, I hope it helps. docx.zip
Thank you. That’s very kind of you. It's very helpful to me，Can you give me the “trunk” function? It is in the second line of utils.ts，import { trunk } from '../../utils/dataTemplate'
Sorry, I hadn't noticed the lack of this code, it's simply a function that truncates a number. Here's the function:
export function trunk(valor: number, casas: number) {
if (!valor) return valor
let valorString
if (valor.toString().indexOf('.') != -1) {
let decimais = valor.toString().substring(valor.toString().indexOf('.') + 1)
casas = casas > decimais.length ? decimais.length : casas
decimais = decimais.substring(0, casas)
valorString = valor.toString().substring(0, valor.toString().indexOf('.')) + '.' + decimais
} else {
valorString = valor.toString()
}
return parseFloat(valorString)
}
Sorry, I hadn't noticed the lack of this code, it's simply a function that truncates a number. Here's the function:
export function trunk(valor: number, casas: number) { if (!valor) return valor let valorString if (valor.toString().indexOf('.') != -1) { let decimais = valor.toString().substring(valor.toString().indexOf('.') + 1) casas = casas > decimais.length ? decimais.length : casas decimais = decimais.substring(0, casas) valorString = valor.toString().substring(0, valor.toString().indexOf('.')) + '.' + decimais } else { valorString = valor.toString() } return parseFloat(valorString) }
Thank you, the exported docx is very beautiful now.Solved a big problem, thank you again！
阳 @.***
Thank you, the exported docx is very beautiful now.Solved a big problem, thank you again！ ------------------ 原始邮件 ------------------ 发件人: "Hufe921/canvas-editor-plugin" @.>; 发送时间: 2024年6月19日(星期三) 中午11:22 @.>; @.@.>; 主题: Re: [Hufe921/canvas-editor-plugin] 编辑器中的换行，导出到docx时全部失效 (Issue #13)
Sorry, I hadn't noticed the lack of this code, it's simply a function that truncates a number. Here's the function:
export function trunk(valor: number, casas: number) { if (!valor) return valor let valorString if (valor.toString().indexOf('.') != -1) { let decimais = valor.toString().substring(valor.toString().indexOf('.') + 1) casas = casas > decimais.length ? decimais.length : casas decimais = decimais.substring(0, casas) valorString = valor.toString().substring(0, valor.toString().indexOf('.')) + '.' + decimais } else { valorString = valor.toString() } return parseFloat(valorString) }
Thank you, the exported docx is very beautiful now.Solved a big problem, thank you again！
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>
抱歉，我没有注意到缺少此代码，它只是一个截断数字的函数。这是函数：
export function trunk(valor: number, casas: number) { if (!valor) return valor let valorString if (valor.toString().indexOf('.') != -1) { let decimais = valor.toString().substring(valor.toString().indexOf('.') + 1) casas = casas > decimais.length ? decimais.length : casas decimais = decimais.substring(0, casas) valorString = valor.toString().substring(0, valor.toString().indexOf('.')) + '.' + decimais } else { valorString = valor.toString() } return parseFloat(valorString) }
你好，拷贝了你的docx，有些地方文件的引用找不到
你好，拷贝了你的docx，有些地方文件的引用找不到
Hello, what references cannot be found?
你这个代码能够保障导出的docx文档行间距，字体样式，字体大小等等保持一致吗？我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错！！！
你这个代码能够保障导出的docx文档行间距，字体样式，字体大小等等保持一致吗？我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错！！！
I couldn't understand exactly what you mean (due to the translation). But at that time I think the use of rowMargin was a bit limited in the editor. So I tried to focus on some of the styles (at least the ones that made the most sense to me at the time).
我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错!!
我无法准确理解你的意思（由于翻译）。但是当时我觉得 rowMargin 在编辑器中的使用有点受限。所以我试着专注于一些风格（至少是当时对我来说最有意义的那些）。 docx.zip
我的意思就是想问，你目前修改了关于这个编辑器的导出docx插件的bug有哪些？我给你看看我在这个exportDocx.ts上面的修改。
我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错!!
我无法准确理解你的意思（由于翻译）。但是当时我觉得 rowMargin 在编辑器中的使用有点受限。所以我试着专注于一些风格（至少是当时对我来说最有意义的那些）。
你用wechat吗？加个联系方式讨论一下