编辑器中的换行，导出到docx时全部失效

[INAGIML]

编辑器中的换行，导出到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
})
}
}

[lmx920014697]

解决了吗 ？

[douglasmatheus]

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

[junceo]

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

您好，能发给我一个完整的包吗？感谢🙏 junceo@qq.com

[douglasmatheus]

您好，能发给我一个完整的包吗？感谢🙏 junceo@qq.com

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

[junceo]

您好，能发给我一个完整的包吗？感谢🙏 junceo@qq.com

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'

[douglasmatheus]

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)
}

[junceo]

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！

[INAGIML]

阳 ***@***.***   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: ***@***.***>

[zyb1123]

[zyb1123]

抱歉，我没有注意到缺少此代码，它只是一个截断数字的函数。这是函数：

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，有些地方文件的引用找不到

[douglasmatheus]

你好，拷贝了你的docx，有些地方文件的引用找不到

Hello, what references cannot be found?

[zyb1123]

你好，拷贝了你的docx，有些地方文件的引用找不到

Hello, what references cannot be found?

你这个代码能够保障导出的docx文档行间距，字体样式，字体大小等等保持一致吗？我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错！！！

[douglasmatheus]

你这个代码能够保障导出的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).

[zyb1123]

我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错!!

我无法准确理解你的意思（由于翻译）。但是当时我觉得 rowMargin 在编辑器中的使用有点受限。所以我试着专注于一些风格（至少是当时对我来说最有意义的那些）。
docx.zip

我的意思就是想问，你目前修改了关于这个编辑器的导出docx插件的bug有哪些？我给你看看我在这个exportDocx.ts上面的修改。

[zyb1123]

我刚修改了一下源码，将他的elemet.font和element.rowMargin进行动态获取，然后写了一个方法进行换算成兼容docx的变量赋值给了new paragragh（）对象中的spacing属性，效果还不错!!

我无法准确理解你的意思（由于翻译）。但是当时我觉得 rowMargin 在编辑器中的使用有点受限。所以我试着专注于一些风格（至少是当时对我来说最有意义的那些）。

你用wechat吗？加个联系方式讨论一下