如何在 vue.js 中使用 iframe 顯示 pdf

Question

我有一個 vue.js webapp，我想在應用程序的 iframe 中顯示一個 PDF，但它沒有從assets文件夾中獲取路徑。 這是我的代碼：

<iframe :src="getPDFPath()" style="width: 100vw;height: 100%;border: none;">
  Oops! an error has occurred.
</iframe>

這是getPDFPath方法：

getPDFPath () {
   return '../../assets/my.pdf'
}

但這不起作用並出現以下錯誤：

無法獲取/assets/my.pdf

然而{{ getPDFPath() }}是： ../../assets/my.pdf 。

當我使用 webpack 時，我也嘗試了以下操作，但這也不起作用：

getPDFPath () {
  var files = require.context('../../assets/', false)
  return files('./my.pdf')
}

這給了我以下錯誤：

./src/assets/my.pdf

模塊解析失敗：>/Users/abc/work/codes/vue/src/assets/my.pdf Unexpected token (1:0)

您可能需要一個合適的加載器來處理這種文件類型。

然而，上面的代碼適用於圖像，正如我之前在這里回答的那樣。

Answer 1

1個模板

<iframe :src="pdfsrc" style="width: 100%;height: 300px; border: none;">
Oops! an error has occurred.
</iframe>

2 腳本

<script>
export default {
  data: () => ({
    pdfsrc: null
  }),
  methods: {
    getPDFPath () {
      return axios
      .get('/sample-3pp.pdf', {
        responseType: "blob"
      })
      .then(response => {
        console.log("Success", response);
        const blob = new Blob([response.data]);
        const objectUrl = URL.createObjectURL(blob);
        this.pdfsrc = objectUrl;
      })
     .catch(console.error); //
    } 
    created() {
        this.getPDFPath();
    }
}
</script>