Drive ID

google drive檔案導出圖片連結

by dpes5407

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <div>
    <br />
    <input v-model.trim="inputUrl" placeholder="輸入drive分享連結">
    <button @click="generateUrl" class="custom-btn neon-blue">產生URL</button><br /><br />
  </div>
  <textarea rows="4" cols="50" id="text" v-model.trim="result"  placeholder="產生結果">
  </textarea>
  <button @click="copyText" class="copy"><span class="copy-text">複製</span></button>
</div>
last update 2024/07/22
<!-- https://drive.google.com/file/d/1FgTcxp2FPxXZD9FxlYgMABWGEYPIT3k4/view?usp=sharing -->
<!-- 2023/04/22 發現有新版本 -->
<!-- https://drive.google.com/file/d/1a9inqYnmcihCvJUupIi3HW-hqkOFSyLh/view?usp=share_link -->

CSS

textarea {
  font-size: 12px;
  border: 2px solid #ED7B00;
  border-radius: 5px;
}

input {
  border: 2px solid #ED7B00;
  padding: 10px;
  border-radius: 5px;
}

.copy {
  border: 0px;
  background-color: #00aced;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
}

.copy-text {
  writing-mode: vertical-lr;
  color: #fff;
}

/* source: https://codepen.io/yuhomyan/pen/GRobbXB */
/* custom-button */
button {
  margin: 10px;
}

.custom-btn {
  width: 130px;
  height: 40px;
  padding: 10px 25px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.neon-blue {
  position: relative;
  color: #00aced;
  border: none;
}
/* 加上圖層 */
.neon-blue:before,
.neon-blue:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  border: 1px solid;
  transition: all 0.3s ease;
}

/* 左上 利用透明transparent */
.neon-blue:before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #00aced;
  border-left-color: #00aced;
}

/* 右下 利用透明transparent */
.neon-blue:after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #00aced;
  border-right-color: #00aced;
}
/* 放大達到重疊+陰影 */
.neon-blue:hover:before,
.neon-blue:hover:after {
  border-color: #00aced;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 5px #00aced;
}

JavaScript

const vm = Vue.createApp({
  data() {
    return {
      inputUrl: '',
      result: ''
    }
  },
  methods: {
    validate(url) {
      const flag = url.indexOf('https://drive.google.com/file/d/', 0)
      return (flag > -1) ? true : false
    },
    generateUrl() {
      const flag = this.validate(this.inputUrl)
      this.result = (flag) ? this.slicer(this.inputUrl) : '格式錯誤'
    },
    slicer(str) {
      str = str.replaceAll("share_link", "sharing")
      const url = 'https://drive.google.com/file/d/'
      const view = '/view?usp=sharing'
      const driveId = str.replace(url, '').replace(view, '')

      const baseUrl = 'https://drive.google.com/thumbnail?id='
      return baseUrl + driveId + '&sz=w1366'
    },
    copyText() {
      const text = document.getElementById('text');
      text.select();
      document.execCommand('copy');
    },
  }
});

vm.mount('#app');

/* 棄用
hideItems() {
      this.countEnter++
      if (this.countEnter % 2 == 1) {
        this.shower = false
        this.inputUrl = ''
      } else {
        this.shower = true
      }
    }, */