Support PDF (hosted)

Feature request

Currently we can add images to our documents. But would be great to also be able to add PDF documents.

What problem does this feature solve?

We could add a PDF to our documents - which are common when creating knowledgebase style websites

How should this be implemented in your opinion?

In createBaseConfig.js , change the rule so it transfers PDFs to the assets as well as images

(Not tested this, but think that that is the code that needs extending)

  config.module
    .rule('images')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('url-loader')
        .loader('url-loader')
        .options({
          limit: inlineLimit,
          name: `assets/img/[name].[hash:8].[ext]`
        })

Are you willing to work on this yourself?

No

[utensil]

I encountered the same problem and have finally worked out a solution.

The solution

Add the following in .vuepress/config.js:

  chainWebpack: (config, isServer) => {
    config.module
      .rule('pdfs')
      .test(/\.pdf$/)
      .use('file-loader')
        .loader('file-loader')
      .options({
        name: `[path][name].[ext]`
      });
    
    config.module.rule('vue')
      .uses.store
      .get('vue-loader').store
      .get('options').transformAssetUrls = {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: ['xlink:href', 'href'],
        a: 'href'
      };
  },

How I found it

What I need is to have some pdf documents along side the markdown files, and can be linked from markdown files.

For example, say I have a xxx.md and I would like to link to a yyy.pdf just beside it like it’s a natural part of the document, not to place it under assets or public.

I can’t get this to work in plain vuepress. After some search, I found this issue and what vuepress did for images, fonts etc. in https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/core/lib/webpack/createBaseConfig.js :

  config.module
    .rule('images')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('url-loader')
        .loader('url-loader')
        .options({
          limit: inlineLimit,
          name: `assets/img/[name].[hash:8].[ext]`
        })
// ...
  config.module
    .rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
        .loader('file-loader')
        .options({
          name: `assets/img/[name].[hash:8].[ext]`
        })

So I add the following in .vuepress/config.js:

  chainWebpack: (config, isServer) => {
    config.module
      .rule('pdfs')
      .test(/\.pdf$/)
      .use('file-loader')
        .loader('file-loader')
      .options({
        name: `[path][name].[ext]`
      });
  },

It should work like images but it didn’t.

But if I link to the pdf as an image somewhere in a markdown file, then it works ( pdf is copied to the some directory structure due to the [path] in option name ).

I used this image hack for a while, until I found https://github.com/vuejs/vuepress/issues/826 and noticed https://github.com/vuejs/vue-loader/blob/master/docs/zh/guide/asset-url.md and realized what made images special, it’s not something in vuepress but vueloader.

Combine these two options together, it worked. I don’t know if there’s any side effects yet, but it doesn’t seem to affect how vuepress handles markdown file links.

Hope it helps.

[utensil]

@chryw My solution here is generic: to “select what files webpack should copy”, just change .test(/\.pdf$/) to any path regex.