pdf.js 浏览 word

要使用pdf.js来浏览Word文档，你需要先将Word文档转换成PDF格式，然后使用pdf.js来打开和预览PDF文件。下面是一些步骤：
1. 首先，你需要下载pdf.js库并将其存放在你的项目的public文件夹中。你可以从这个链接下载：
2. 接下来，你需要获取要预览的Word文档的信息，并将其存储在sessionStorage中。你可以使用一个组件来预览文件，你可以在这个组件的template部分使用iframe来展示PDF文件。下面是一个示例代码：

<template>
  <div class="main-page-container">
    <div>文件名： {{pdfName}}</div>
    <div class="pdf_container">
      <iframe :src="`pdf/web/viewer.html?file=${pdfUrl}`" class="pdf-window" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: "ReportView",
  data() {
    return {
      pdfUrl: "",
      commonUrl: "http://47.107.104.211:1774/api",
      pdfName:""
    };
  },
  mounted() {
    this.pdfName = JSON.parse(sessionStorage.getItem("pdfId")).name;
    let pdfId = JSON.parse(sessionStorage.getItem("pdfId")).id;
    this.pdfUrl = encodeURIComponent(
      this.commonUrl +
      "/MtProjectDocItem/Preview/" +
      pdfId
    );
  }
};
</script>

<style lang="less" scoped>
.pdf_container{
  width: 100%;
  height: calc(100% - 90px);
}
</style>

3. 在以上代码中，你需要设置pdfUrl的值，以指定要预览的PDF文件的路径。你可以将Word文档转换成PDF格式，并将PDF文件的路径设置给pdfUrl变量。在这个例子中，我们使用了一个API来获取PDF文件的路径。你需要根据你的具体情况修改这部分代码。
4. 最后，你可以在浏览器中访问预览PDF文件的页面，通常是在你的项目的地址后面加上`/static/plugins/pdfjs/web/viewer.html`。

请注意，pdf.js库默认用于预览PDF文件，而不是Word文件。所以，你需要将Word文档转换成PDF格式后才能使用pdf.js来进行浏览。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [pdf.js结合iframe实现文件（word，pdf）预览，且可通过手势缩放](https://blog.csdn.net/weixin_39150852/article/details/109627084)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [springboot使用pdfjs预览office文件](https://blog.csdn.net/weixin_39220472/article/details/117630147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]