volodymyrbaydalka / docxjs Goto Github PK

i use docx-preview in vue 3 . And this is my code

import * as docx from 'docx-preview'
import Docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import * as JSZip from 'jszip'

onMounted(() => {
  window.JSZip = JSZip
})

const exportWord = () => {
  JSZipUtils.getBinaryContent('template.docx', function(error, content) {
    console.log('-----', content)
    if (error) {
      throw error
    }
    const zip = new JSZip(content)
    console.log('+++++', zip)
    const doc = new Docxtemplater()
    console.log('/////', doc)
    doc.loadZip(zip)
    console.log('=====', doc)
    doc.setData({
      ...toRaw(props.row)
    })
    try {
      doc.render()
    } catch (error) {
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      }
      console.log(JSON.stringify({ error: e }))
      throw error
    }
    const out = doc.getZip().generate({
      type: 'blob',
      mimeType:
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    })
    previewShow.value = true
    docx.renderAsync(out, word)
    // saveAs(out, '测试.docx')
  })
}

how can i solve this problem.

I'm a novice. Could you please show the code to open the docx file on the local server through the url? Thank you very much!

Shapes in documents are skipped. I do know from my OpenXML work, this is one of the harder things to support.

Any plans to add shapes? simple sample docx attached

pill.docx

Hello,

I am contacting you to report a bug in your library that I have integrated into an Angular project.
On windows I have no problems, but on linux I have a message telling me that it does not find JSZip.

When I look closer, I see that the problem comes from the fact that "JSZip" is not present in node_modules, but "jszip" is.

To correct the problem, you just need to change the references to "JSZip" to "jszip" in your library.

Would it be possible to integrate this fix?

I am trying to use this library in a React app, but everytime I try to use renderAsync(), an error appears telling me "document is not defined".

Here is my code. I am using TypeScript on a next.js project.

import styles from '../styles/Home.module.css'
import { renderAsync, defaultOptions } from 'docx-preview'
import React, { useEffect, useRef, useState } from "react";
import DocViewer, {PDFRenderer} from 'react-doc-viewer';
import JSZip from 'jszip';

export default function Home() {

const [text, setText] = useState("Docx document reader");
const [file, setFile] = useState();
const [show, setShow] = useState(false);

const onChange = (e: any) => {
if (e !== null) {
setText("File uploaded !");
setFile(e)
}
};

const previewFile = () => {
if (file !== null) {

  setShow(true);

  if (typeof document !== "undefined") {
    // document exists
    let container = document.getElementById("preview") as HTMLElement;
    console.log(container)
    //Render the Word Document.
    renderAsync(file, container);
  } 
  else {
    // document does not exist
  }

}

}

return (

  <input type="file" accept='.docx' value={file} onChange={e => onChange(e.target.value)}/>
  <input type="button" id="btnPreview" value="Preview Word Document" onClick={previewFile} />

  <div id='preview' ></div>
  {/*(show && file !== undefined) && <DocViewer pluginRenderers={[PDFRenderer]} documents={[{uri: require('C:/Users/LudovicBORGES/Documents/wrd-reader/word.txt')}]}/>*/}

</div>

jszip.min.js?2e68:13 Uncaught (in promise) Error: Can't find end of central directory : is this a zip file ? If it is, see https://stuk.github.io/jszip/documentation/howto/read_zip.html
at h.readEndOfCentral (jszip.min.js?2e68:13:1)
at h.load (jszip.min.js?2e68:13:1)
at eval (jszip.min.js?2e68:13:1)

The docx file used can be opened normally and is not damaged

Describe the bug

Can not load charts，there is a blank space instead！

Document

Any document which contains chart！

Hello @zVolodymyr,

Unfortunately the creation of those style blocks result in violations to csp settings in regards to inline-styles.
Do you see any possibility to introduce an option, to style all elements directly with js calls, instead of providing a style block?

Thanks and best regards

Thiemo

This m06034.docx will give you the error.

A jszip error occurred

This t-Test.docx file won't parse!

Describe the bug
Can't read the data of 'the loaded zip file'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc)

Document
axios({ method: 'get', responseType: 'blob', url: '***' }).then(({ data }) => { console.log('测试数据', docx) docx.renderAsync(data, document.getElementById('documentDocx'), null, { renderHeaders: false, renderFooters: false, debug: true }).then(x => { console.log(x) }) });

hi,
page break didn't work properly, because i guess you didn't check the lastRenderedPageBreak.

Basically there are 3 types of breaks:

• page breaks
• section breaks
• lastRenderedPageBreak
  thank you.

Describe the bug
Can't show revisions in docx preview.

Document
The file can't show revisions is uploaded below.
test.docx

Expected behavior
Hope to show revisions on website.

Screenshots

Desktop (please complete the following information):

• OS: [Windows]
• Browser [chrome]
• Version [all]

Thanks for your excellent work. I found your lib is very helpful for my project, but I got some problems as described below:

Describe the bug

1. Equation created by Equation Editor (Microsoft Equation 3.0) in Word file (.docx) can not display when previewing in browser
2. Shape can not display when previewing in browser

Screenshots
Original document: https://drive.google.com/file/d/1P-y1PWbN-w07HIUyhJw2LQBlyCP9LKz5/view?usp=sharing
Display on browser: https://drive.google.com/file/d/1buz5_v-xU_MuwOVWjmyMQElkiZvhrF5U/view?usp=sharing

Document
Please check original document here: https://docs.google.com/document/d/1WWjMulUVjr0S2RD1TOTxazMNtatEHKQW/edit?usp=sharing&ouid=102073849288913805416&rtpof=true&sd=true

Thanks

Expected behavior
Can you do paging like WPS

If there is a style a and it is based on b which itself is based on c, the current code (resolving it alphabeticcaly, due to the map) ignores the rules of c in the moment it copies to a.

I already have a fix for this and will open PR soon.

Describe the bug
docx cannot render,
TypeError: Cannot read properties of null (reading 'headerRefs')
at HtmlRenderer.renderSections (html-renderer.ts:315:64)
at HtmlRenderer.render (html-renderer.ts:118:30)
at docx-preview.ts:57:22

Desktop (please complete the following information):

• OS: [windows]
• Browser [chrome]
• Version [107.0.5304.63]

Describe the bug
when use 一、二、三 as Sequence number，it transform to 1、2、3

Expected behavior
i hope it can convert Chinese serial numbers

How can I read the old doc format

inWrapper:

##not inWrapper:

file:

问题排查流程.docx

Hi @zVolodymyr - this project is very interesting to us. Are you interested in sponsorship? Please reach out to me [email protected] to discuss. Thanks.

First I just want to say great project! You have a fairly solid implementation and its not too hard to follow as well.

I've been working on something similar over the past few days for fun and ended up stumbling on your implementation. I'd love to help push this project further if you're open to some assistance and partnership.

I've created two pull requests for review #8 and #9

Hello,

I am contacting you to report a bug in your library that I have integrated into an Angular project.
On Firefox it is impossible to visualize images in a document.

By looking closer, I realize that the problem comes from the URL API of the browser which is not implemented in the same way on Chrome as on Firefox.

Indeed, the toString method does not return the same result:

new URL("media/image2.png", "file://docx/" + "word/").toString()
Chrome => 'file://docx/word/media/image2.png'
Firefox => 'file:///word/media/image2.png'

To correct the problem, you just need to modify the "prefix" variable in the resolvePath method of your library by replacing the value "file://docx/" with "file:///docx/";

Would it be possible to integrate this fix?

Please support the Table Of Contents with click and redirect, which like the anchor. Thank you very much! The catalog of the rendered html can't work now.

I encountered this problem the first time I accessed it. Could you please help me take a look
quesition:

this is my code: Vue3

<template>
  <div class="container">
    <a-upload-dragger
      name="file"
      accept=".docx"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :before-upload="beforeUpload"
      :headers="{ 'X-Requested-With': null }"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">Click or drag file to this area to upload</p>
      <p class="ant-upload-hint">
        Support for a single or bulk upload. Strictly prohibit from uploading
        company data or other band files
      </p>
    </a-upload-dragger>
    <div class="doc-preview" ref="docContainer"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { renderAsync } from 'docx-preview'
const docContainer = ref(null)

const beforeUpload = file => {
  let fileReader = new FileReader();
  fileReader.readas
  fileReader.readAsArrayBuffer(file);
  fileReader.onload = () => {
    renderAsync(fileReader.result,docContainer)
  };
};

.docx image wrap has 6 type of settings (wrap off, before, after, parallel, through, optimal)

wrap off sometimes in wrong lines

Thanks god, through is Normal

before, after, parallel, optimal is just css float:left

For example:

    This is what parallel wrap looks
like on microsoft  ########### word,
libreOffice writer #         # , or 
something else.    #  image  # test
words test word    #         # test 
words test word    ###########  test 
words test words  test  words  test 

    And this is what parallel wrap 
########### looks like on this npm
#         # package. words test 
#  image  # words test word  test 
#         # words test word  test 
########### words test word  test 
words test words  test  words  test 

Describe the bug
.docx file rendered, but display not completely, the file page's left part(about 4 letters width) is missing, I can't scroll left either, otherwise at least the right part can see when I scroll to the right.

mobile web pages.

Document

const docxOptions = Object.assign(defaultOptions, {
  debug: true, //enables additional logging
  experimental: true, //enables experimental features (tab stops calculation)
  // className: "docx", //class name/prefix for default and document style classes
  // inWrapper: false, //enables rendering of wrapper around document content
  // ignoreWidth: false, //disables rendering width of page
  // ignoreHeight: false, //disables rendering height of page
  // ignoreFonts: false, //disables fonts rendering
  // breakPages: false, //enables page breaking on page breaks
  // ignoreLastRenderedPageBreak: false, //disables page breaking on lastRenderedPageBreak elements
  // trimXmlDeclaration: false, //if true, xml declaration will be removed from xml documents before parsing
  // useBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
  // useMathMLPolyfill: false, //includes MathML polyfills for chrome, edge, etc.
});
await renderAsync(buffer, target, null, docxOptions);

Expected behavior
see the pages properly

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]: Chrome (see the screenshots)
• Version [e.g. 22]: 103.0.5060.53

Additional context
"docx-preview": "^0.1.11",
"vue": "^2.6.14",

as title

我想把 标题 生成导航标签，类似以下这样

I want the title to generate a navigation tag, something like this

Describe the bug
jszip: can‘t find end of central directory: is this a zip file?

Document
java use freemarker, ajax callback a blob, just like this:

i just renderAsync this blob, error.
maybe freemarker created blob is diffrent?

Expected behavior
i hope it working

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version 22

While the doucment Parser detects line breaks, those are not rendered.

I already have a fix and will create PR soon

Describe the bug
TableCell rendering Td rowspan Is not correct！

Document

10kVbyqhzdl1.docx

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

version:0.1.10
example file:
testMath.docx

First let me say your library is the best I have tried so far so thanks for your amazing work.

For any document that has a standard table included in it the tables width after conversion to html extends into the padding. Typical word document have the parent section with a set padding around entire page. Tables extend into the right margin but start perfecting where the padding starts on the left as it should.

The table width should be consistent with the the display inside the document.

It can be Appear with my file

aaa.docx

tips： no blank pages when opening with office apps

Error: This page contains the following errors:error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error.

Thanks for your excellent work. I found a feature not documented in README. If there is not any page break inserted in the docx file, all content will be rendered in one page no matter how long it is. Is there any option to enable page break automatically just like Microsoft office?

Is there any way to get Table of content separately?
And can its links be used?

The modification of the configuration has no effect. I hope you can reply. Thank you very much

Describe the bug
serial number error still have in [0.1.14]

Describe the bug
Picture not showing see attachment

Document
If applicable, add *.docx document to help explain your problem.
docxjs_issues.docx

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
docxjs

office

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other cont
docxjs_issues.docx
ext about the problem here.

Why only docx is supported, but doc is not supported?

For Chinese documents, the serial number is seriously lost, both Chinese and digital. Line breaks are also not accurate enough, and there are some problems with consistency.

This file does not render correctly.

Hyperlinks are not rendered as tag a

This is part of the document.xml

    <w:p>
      <w:pPr>
        <w:ind w:firstLine="420" w:firstLineChars="0"/>
      </w:pPr>
      <w:r>
        <w:rPr>
          <w:color w:val="auto"/>
          <w:u w:val="none"/>
        </w:rPr>
        <w:fldChar w:fldCharType="begin"/>
      </w:r>
      <w:r>
        <w:rPr>
          <w:color w:val="auto"/>
          <w:u w:val="none"/>
        </w:rPr>
        <w:instrText xml:space="preserve"> HYPERLINK \l &quot;_# test title&quot; </w:instrText>
      </w:r>
      <w:r>
        <w:rPr>
          <w:color w:val="auto"/>
          <w:u w:val="none"/>
        </w:rPr>
        <w:fldChar w:fldCharType="separate"/>
      </w:r>
      <w:r>
        <w:rPr>
          <w:rStyle w:val="6"/>
        </w:rPr>
        <w:t>test</w:t>
      </w:r>
      <w:r>
        <w:rPr>
          <w:color w:val="auto"/>
          <w:u w:val="none"/>
        </w:rPr>
        <w:fldChar w:fldCharType="end"/>
      </w:r>
    </w:p>

    <w:p>
      <w:pPr>
        <w:ind w:left="420" w:leftChars="0" w:firstLine="420"/>
        <w:rPr>
          <w:rStyle w:val="6"/>
          <w:i/>
          <w:iCs/>
          <w:lang w:eastAsia="zh-Hans"/>
        </w:rPr>
      </w:pPr>
      <w:r>
        <w:rPr>
          <w:rFonts w:hint="eastAsia"/>
          <w:i/>
          <w:iCs/>
          <w:color w:val="auto"/>
          <w:u w:val="single"/>
          <w:lang w:eastAsia="zh-Hans"/>
        </w:rPr>
        <w:fldChar w:fldCharType="begin"/>
      </w:r>
      <w:r>
        <w:rPr>
          <w:rFonts w:hint="eastAsia"/>
          <w:i/>
          <w:iCs/>
          <w:color w:val="auto"/>
          <w:u w:val="single"/>
          <w:lang w:eastAsia="zh-Hans"/>
        </w:rPr>
        <w:instrText xml:space="preserve"> HYPERLINK &quot;https://www.baidu.com/&quot; </w:instrText>
      </w:r>
      <w:r>
        <w:rPr>
          <w:rFonts w:hint="eastAsia"/>
          <w:i/>
          <w:iCs/>
          <w:color w:val="auto"/>
          <w:u w:val="single"/>
          <w:lang w:eastAsia="zh-Hans"/>
        </w:rPr>
        <w:fldChar w:fldCharType="separate"/>
      </w:r>
      <w:r>
        <w:rPr>
          <w:rStyle w:val="6"/>
          <w:rFonts w:hint="eastAsia"/>
          <w:i/>
          <w:iCs/>
          <w:lang w:eastAsia="zh-Hans"/>
        </w:rPr>
        <w:t>敬请期待</w:t>
      </w:r>
    </w:p>

案例1.docx

using const in loop would cause a problem in firefox 50

SyntaxError: missing = in const declaration

https://stackoverflow.com/questions/39044803/syntaxerror-missing-in-const-declaration-firefox-50