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

INAGIML · 2024-04-07T01:45:04Z

编辑器中的换行，导出到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 · 2024-05-09T06:47:47Z

解决了吗？

douglasmatheus · 2024-05-09T11:37:29Z

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 · 2024-06-18T07:07:32Z

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]

douglasmatheus · 2024-06-18T12:04:31Z

您好，能发给我一个完整的包吗？感谢🙏 [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

junceo · 2024-06-19T02:25:42Z

您好，能发给我一个完整的包吗？感谢🙏 [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'

douglasmatheus · 2024-06-19T02:47:05Z

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 · 2024-06-19T03:22:31Z

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 · 2024-09-23T00:55:45Z

阳 ***@***.***   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 · 2025-01-05T06:18:18Z

zyb1123 · 2025-01-05T06:19:10Z

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

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 · 2025-01-06T11:39:34Z

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

Hello, what references cannot be found?

zyb1123 · 2025-01-06T14:20:29Z

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

Hello, what references cannot be found?

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

douglasmatheus · 2025-01-06T14:44:34Z

你这个代码能够保障导出的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 · 2025-01-06T15:03:52Z

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

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

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

zyb1123 · 2025-01-06T15:05:02Z

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

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

INAGIML commented Apr 7, 2024

lmx920014697 commented May 9, 2024

douglasmatheus commented May 9, 2024

junceo commented Jun 18, 2024

douglasmatheus commented Jun 18, 2024

junceo commented Jun 19, 2024

douglasmatheus commented Jun 19, 2024

junceo commented Jun 19, 2024

INAGIML commented Sep 23, 2024 via email

zyb1123 commented Jan 5, 2025

zyb1123 commented Jan 5, 2025

douglasmatheus commented Jan 6, 2025

zyb1123 commented Jan 6, 2025

douglasmatheus commented Jan 6, 2025

zyb1123 commented Jan 6, 2025

zyb1123 commented Jan 6, 2025

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

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

Comments

INAGIML commented Apr 7, 2024

lmx920014697 commented May 9, 2024

douglasmatheus commented May 9, 2024

junceo commented Jun 18, 2024

douglasmatheus commented Jun 18, 2024

junceo commented Jun 19, 2024

douglasmatheus commented Jun 19, 2024

junceo commented Jun 19, 2024

INAGIML commented Sep 23, 2024 via email

zyb1123 commented Jan 5, 2025

zyb1123 commented Jan 5, 2025

douglasmatheus commented Jan 6, 2025

zyb1123 commented Jan 6, 2025

douglasmatheus commented Jan 6, 2025

zyb1123 commented Jan 6, 2025

zyb1123 commented Jan 6, 2025