Merge branch 'gh-pages'

Author: yiiran8080

build/bundle.js

@@ -1,6 +1,6 @@
 {
  "name": "react-office-viewer",
- "version": "1.1.0",
+ "version": "1.0.3",
  "description": "A React component to preview document of 'pdf,xls,xlsx,docx', which can automatically identify file types.",
  "main": "build/bundle.js",
  "scripts": {

build/pic/docx.png

@@ -9,6 +9,7 @@ export default function DocxViewer(props) {
  const [fileName, setFileName] = useState('');
  const [showError, setShowError] = useState(false);
  const [errorInfo, setErrorInfo] = useState(t('formatInfoDocx'));
+ const [scale, setScale] = useState(1);
  const [fileArrayBuffer, setFileArrayBuffer] = useState(); //ArrayBuffer类型的文件
  const [showLoading, setShowLoading] = useState(false);
  useEffect(() => {
@@ -86,14 +87,28 @@ export default function DocxViewer(props) {
  const onShowError = (status) => {
  setShowError(status);
  }
+ const onZoom = direc => {
+ if (direc == 'in') {
+ //放大
+ if (scale >= 1) return;
+ let _scale = scale + 0.1;
+ //console.log(_scale);
+ setScale(_scale.toFixed(1) * 1);
+ } else {
+ if (scale <= 0.3) return;
+ let _scale = scale - 0.1;
+ //console.log(_scale);
+ setScale(_scale.toFixed(1) * 1)
+ }
+ }
  return <div className={styles['pg-viewer-wrapper']} style={{ width: width || '100%', height: height || document.body.offsetHeight - 45 + 'px' }}>
  <Loading showLoading={showLoading} />
  <ErrorLine errorInfo={errorInfo} showError={showError} onShowError={onShowError} />
- <TitleWithDownload backgroundColor='rgba(35,100,155,0.9)' handleDownload={handleDownload} fileName={fileName} disabled={!fileArrayBuffer} />
+ <TitleWithDownload backgroundColor='rgba(35,100,155,0.9)' handleDownload={handleDownload} fileName={fileName} disabled={!fileArrayBuffer} onZoom={onZoom} zoom={true} />
  <div
  className={styles['document-container']}
  style={{
- width: '100%',
+ width: scale * 100 + '%',
  height: '85%',
  overflow: 'auto'
  }}

build/pic/pdf.png

@@ -325,6 +325,4 @@
  }
  }
  }
-
-
 }

build/pic/xlsx.png

@@ -248,7 +248,7 @@ export default forwardRef((props, ref) => {
  <div className={styles["splitToolbarButton"]}>
  <button className={`${styles["toolbarButton"]} ${styles["zoomOut"]}`} title={t("zoomOut")} onClick={onZoomOut} disabled={scaleOut === MIN_SCALE}>
  </button>
- <div className="splitToolbarButtonSeparator"></div>
+ <div className={styles["splitToolbarButtonSeparator"]}></div>
  <button className={`${styles["toolbarButton"]} ${styles["zoomIn"]}`} title={t("zoomIn")} onClick={onZoomIn} disabled={scaleOut === MAX_SCALE}>
  </button>
  </div>

package.json

@@ -3,10 +3,19 @@ import styles from '../style.less';
 import downloadImg from "../../../assets/images/toolbarButton-download.svg"
 export default function TitleWithDownload(props) {
 
- const { fileName, handleDownload, disabled = false, backgroundColor = '#1e8e3edb' } = props;
+ const { fileName, handleDownload, disabled = false, backgroundColor = '#1e8e3edb', zoom, onZoom } = props;
  return (
  <div className={styles.title} style={{ backgroundColor: backgroundColor }}>
  <span>{fileName}</span>
+ {
+ zoom && (
+ <div style={{ display: 'flex' }}>
+ <button className={`${styles["toolbarButton"]} ${styles["zoomOut"]}`} onClick={() => onZoom('out')}></button>
+ <div className={styles["splitToolbarButtonSeparator"]}></div>
+ <button className={`${styles["toolbarButton"]} ${styles["zoomIn"]}`} onClick={() => onZoom('in')}></button>
+ </div>
+ )
+ }
  <button className={styles["download"]} title={t("download")} onClick={handleDownload} disabled={disabled}><img src={downloadImg} /></button>
  </div>
  )

src/components/DocxViewer/index.js

@@ -1,3 +1,9 @@
+:root {
+ --toolbarButton-zoomOut-icon: url(../../assets/images/toolbarButton-zoomOut.svg);
+ --toolbarButton-zoomIn-icon: url(../../assets/images/toolbarButton-zoomIn.svg);
+ --separator-color: rgba(0, 0, 0, 0.3);
+}
+
 .title {
  display: flex;
  justify-content: space-between;
@@ -53,4 +59,47 @@
  border-radius: 5px;
  cursor: pointer;
  }
+}
+
+
+.toolbarButton {
+ border: 0 none;
+ background: none;
+ width: 28px;
+ height: 28px;
+ border: none;
+ border-radius: 2px;
+ color: #666;
+ font-size: 12px;
+ cursor: pointer;
+
+}
+
+.toolbarButton::before {
+ /* All matching have a size of 16x16
+ * All relevant containers have a size of 28x28 */
+ position: absolute;
+ top: 6px;
+ left: 6px;
+ width: 16px;
+ height: 16px;
+ content: "";
+ // background-color: var(--toolbar-icon-bg-color);
+ background-size: cover;
+}
+
+.splitToolbarButtonSeparator {
+ float: inline-start;
+ margin: 4px 0;
+ width: 1px;
+ height: 20px;
+ background-color: var(--separator-color);
+}
+
+.zoomOut::before {
+ background-image: var(--toolbarButton-zoomOut-icon);
+}
+
+.zoomIn::before {
+ background-image: var(--toolbarButton-zoomIn-icon);
 }